Rabu, 21 November 2007

Bina Widget Peribadi

SalamX..!!

Musim sekarang ramai yang gemar selitkan image tertentu dekat tepi paparan blog atau website seperti yang aku pakai image di sebelah kanan diari nie. Istilah diapun ringkas je “Widget“.

Nampak menarik jugak yek…!! Selalunya Widget nie dia ader peranan tertentu seperti jika kita hendak serlahkan sesuatu terutamanya link-link yang kita ingin tetamu kita susuri. Jadi buat semua pemilik blog atau apa jugak mende yang kita namakan web page nie.. kalau berminat jom kita sama-sama cuba bina widget kita sendiri.

Langkah 1:

Memula sekali kita perlu ader image. Camner image tu?!! Terpulang pada kau orang lah camner kau orang nak. Kalau nak animation.. buat le pakai gif dan kalau nakkan yang berbayang blur save je atas nama png.

Ok nie image widget yang aku nak pakai. Image nie kita upload ke root cth: http://www.lamanblog.net/image.png


Langkah 2:

Kita perlu masukkan code javascript tertentu. Untuk bina javascript nie kita sama-sama buka notepad dan masukkan code yang aku kasi di bawah nie (nombor 1, 2, 3… dalam coding tu takyah la salin sekali hehe…):

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 cot_tl_fixedCSS=‘#cot_tl_fixed{position:fixed;’;
cot_tl_fixedCSS=cot_tl_fixedCSS+’_position:absolute;’;
cot_tl_fixedCSS=cot_tl_fixedCSS+’bottom:0px;’;
cot_tl_fixedCSS=cot_tl_fixedCSS+’right:0px;’;
cot_tl_fixedCSS=cot_tl_fixedCSS+’clip: inherit;’;
cot_tl_fixedCSS=cot_tl_fixedCSS+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+’bottom: 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://diari.mypendidik.net/";
   document.write(‘
’); document.write(‘’);document.write(’
’); }
Apa yang perlu kau orang ejas cuma function cot( ) yang berada paling bawah code. Nampak tak ader tertulis url: var cot_tl_bigBaseURL= “http://diari.mypendidik.net/”; .

Ubah le masukkan url pilihan kau orang sendiri. Seterusnya save as atas nama widget.js sebab kita nakkan dia jadi fail js. Fail widget.js nie pun kita upload je di tempat yang sama seperti image tadi.

Langkah 3:

Seterusnya kita perlukan coding panggilan fail widget.js dan fail image yang kita upload tadi. Jadi kita perlu masukkan beberapa baris code panggilan javascript seperti berikut (nombor 1, 2, 3… dalam coding tu takyah la salin…):
    
     
    

Code atas nie kita perlu masukkan ke bahagian BODY. Apa sahaja yang kita nampak di paparan web itu namanya bahagian <body> (istilah kod asas html). Jadi kalau nak senang… kita cuma cari code yang tertulis </body> dan masukkan code ini sebelum penutup </body> hehee…

Langkah Akhir:

Lepas tu upload semula fail di mana kau orang tambah coding tu. Refrest page web kita dah lihat hasilnya… siap !! :-)
Celoteh
0 Celoteh

0 celoteh:

Catat Ulasan