MENGUBAH ADI WIDGET

Assalamualaikum sahabat-sahabat. Bertemu lagi kita di ruangan dunia komputer lagi. Kali ni saya nak cerita tentang bagaimana kita nak modify Adi widget. Saya adalah pengguna adi widget juga. Adi Widget merupakan suatu gambar statik(kalau tera ubah x jadi statik) yang boleh kita letakkan di dalam blog kita. Sahabat-sahabat boleh pergi mencuba Adi-widget di laman web http://adiwidget.blogspot.com/

Cara nak guna adi widget ialah kita ambil script dia atau code dia dan kemudian bagi pengguna blogspot anda boleh pergi ke bahagian Layout-> Edit HTML-> dan kemudian tekan Ctrl + F untuk buat search dan tulis tag ini </body> dan tekan enter ataupun sahabat pergi cari sendiri di hujung kod html kita tag tersebut dan letak sebelum tag tersebut. Contohnya:

<script language="JavaScript" src="http://adiwidget.com/js/aditopleft.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://adiwidget.com/images/iloveflag/i_love_phillipines.png")</script></body>



Baiklah pada hari ini saya akan tunjukkan isi-isi dan teknik mengubah sedikit tentang Adi widget tersebut. Sebenarnya Adi widget terdiri daripada 2 komponen penting iaitu GAMBAR & JAVASCRIPT.

Mengambil contoh kod di atas kita akan dapat tahu bahawa 2 komponen penting tersebut iaitu:

GAMBAR = terletak di http://adiwidget.com/images/iloveflag/i_love_phillipines.png
JAVASCRIPT= terletak di http://adiwidget.com/js/aditopleft.js

Okeylah apa kata kalau sahabat ingin letakkan gambar yang sahabat suka misalnya ialah gambar yang sahabat cari di internet. Misalnya saya meminati gambar ini iaitu yang terletak di
http://packetstormsecurity.org/mag/codebreakers/cby.jpg
oleh itu saya akan menggantikan url gambar tersebut dengan url gambar dari Adi widget (Ya ampun harap-harap adi widget tak marah yek..hehe) contohnya:

<script language="JavaScript" src="http://adiwidget.com/js/aditopleft.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://packetstormsecurity.org/mag/codebreakers/cby.jpg";)</script></body>

okey jadi gambarnya akan berubah menjadi gambar pilihan sahabat-sahabat. kita sambung nanti yek...

Sambungan - Okey sebelum ini kita telah cuba untuk mengubah gambar di dalam adi widget, namun kali ini kita akan cuba melihat sedikit tentang isi kandung javascript didalam adi widget. Fungsi javascript adi-widget ialah untuk meletakkan gambar di bahagian tertentu iaitu di bahagian penjuru blog kita. Ayuh kita tengok satu contoh iaitu kita ambil contoh diatas iaitu:

http://adiwidget.com/js/aditopleft.js

aha jadi kita ambil url ni dan tampal di browser kita maka akan kelihatan coding2 tertentu jenis javascript.

untuk mengubah skrip ini sahabat boleh download terus dan berikut gambaran javascript yg saya buka dilaman web Adi-widget



kemudian mari kita lihat sedikit sebanyak kandungan dan mari kita ubah yang simple jer dahulu.

var Ovr2='';
if(typeof document.compatMode!='undefined' && document.compatMode!='BackCompat')
{
cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";
}
else
{
cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";
}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{
cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";
}
else
{
cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";
}


var adi_top_leftCSS='#adi_top_left{position:fixed;';
adi_top_leftCSS=adi_top_leftCSS+'_position:absolute;';
adi_top_leftCSS=adi_top_leftCSS+'top:0px;';
adi_top_leftCSS=adi_top_leftCSS+'left:0px;';
adi_top_leftCSS=adi_top_leftCSS+'clip: inherit;';
adi_top_leftCSS=adi_top_leftCSS+cot_t1_DOCtp;

var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;';
cot_tl_popCSS=cot_tl_popCSS+'position:fixed;';
cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;';
cot_tl_popCSS=cot_tl_popCSS+'height:194px;';
cot_tl_popCSS=cot_tl_popCSS+'width: 244px;';
cot_tl_popCSS=cot_tl_popCSS+'border: thin solid #000000;';
cot_tl_popCSS=cot_tl_popCSS+'right: 100px;';
cot_tl_popCSS=cot_tl_popCSS+'top: 30px;';
cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;';
cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;';
cot_tl_popCSS=cot_tl_popCSS+'z-index: 100;';
cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;

document.write('');

function cot_tl_bigPopup(url)
{
newwindow=window.open(url,'name');

if(window.focus)
{
newwindow.focus()
}
return false;
}

function cot(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate)
{
var cot_tl_bigBaseURL= "http://adiwidget.blogspot.com/";
document.write('

');
document.write('');document.write('

');
}


Kita disini akan mencari url contohnya seperti diatas tu yang telah saya hitamkan atau "boldkan" adalah url dimana kita akan ubah ye. url atau uniform resource locator tersebut akan kita ubah dan kemudian kita gantikan dengan url laman web blog kita. Jadi kesannya bila kita klik kepada gambar tersebut ia akan menuju ke laman web kita semula dan bukan url adi-widget.aha...

jadi bila dah ubah tu savekannyer dalam bentuk format .js. Contohnya macam nila

skripsaya.js

save gune notepad ye.dan pastikan extensionnyer bukan .txt sebaliknya .js. kemudian ia akan menjadi file jenis javascript dan kita akan uploadkan ke laman web

http://www.ripway.com

daftar dulu yer...

kemudian kita akan lihat semula kepada skrip Adi-Widget yang asal yang dia suruh kita tampal tu. Kita akan modify skrip dia yer. Contohnyer

<script language="JavaScript" src="URL JAVASCRIPT YANG TELAH SAYA UPLOAD" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("URL GAMBAR YANG SAYA MINATI")</script>

Dan tampalkan skrip ini akhirnya kedalam blog kita yer seperti yang mula-mula saya bagitau.