Ticker yang dibuat dalam bentuk 2 kolom ini mampu memuat teks sebanyak sampeyan suka. Masing-masing teks akan secara bergiliran ditampilkan dalam periode waktu yang telah ditentukan. Kolom pertama sebagai tempat menuliskan judul dan kolom ke dua digunakan sebagai tempat menuliskan teks yang akan disampaikan ke pengunjung blog. Karena melalui javascript sudah didesain sedemikian rupa sehingga teks ini mampu membentuk sebuah link, maka sampeyan bisa masukkan link sebanyak sampeyan suka pula.
Posisi ticker dapat dirubah sesuai keinginan dengan merubah nilai margin-top dan margin-left. Apabila tanpa dilakukan perubahan di margin-left dan margin-topnya, maka ticker ini akan nangkring di bagian pojok kiri atas, menutup Navbar bagian tersebut atau jika navbar tidak ditampilkan maka dia akan terletak di bagian header blog. Untuk menambah gaya tampilannya, tentu saja ada sebuah efek yang difungsikan di dalamnya.
Cara membuat Ticker 2 kolom sangat mudah karena sampeyan tinggal copy javascriptnya, kemudian ganti judul serta teks dan linknya, simpan di template dan selesailah sudah.
Kode HTML dan Javascript Ticker 2 kolom
<div id="spage" style="position:absolute;margin-left:0px;margin-top:0px;width:600px;height:38px;overflow:hidden;">Copy semua kode XHTML dan masukan melalui ADD gadgetKeterangan/Catatan :
<script type="text/javascript">
//<![CDATA[
/* lefransnote */
var text = new Array();
var header = new Array();
var linka = new Array();
var targa = new Array();
var divtext = new Array();
var divh = new Array();
var objst = new Array();
var objs = new Array();
var objsh = new Array();
text[0] = "Daftarkan segera di sekretariat calon bintang film uhuk!";
text[1] = "Dapatkan segera senjata api tanpa pelatuk di gerai kami!";
text[2] = "Selamat datang dan selamat menikmati semoga bermanfaat";
header[0] = "Terima Bintang Uhuk :";
header[1] = "Gratis Pistol :";
header[2] = "lefransnote !";
linka[0] = "http://lefransnote.blogspot.com/";
linka[1] = "http://lefransnote.blogspot.com/";
linka[2] = "http://lefransnote.blogspot.com/";
targa[0] = "_parent";
targa[1] = "_parent";
targa[2] = "_parent";
uagent = window.navigator.userAgent.toLowerCase();IEB=(uagent.indexOf('msie') != -1)?true:false;var scompat = document.compatMode;var kalan=0;var vcurr=0;var vnext=0;var str2='';var mc=0;mc=text.length;stepc=parseInt(20*(4000/1000));dif=0.00;op=1.00;dif=(1.00/stepc);var RealTickerWidth=0;var RealTickerHeight=0;var CalcIcWidth=0;var CalcIcHeight=0;var nstheight=0,nst2width=0;nstheight=32-1-1;nst2width=600-1-1;var icwidth=600;var icheight=32;var msgw,msgh;msgw=600-170;if((IEB==true)&&(scompat == "BackCompat" )){RealTickerWidth=600;RealTickerHeight=32;}else{ RealTickerWidth=600-2*(1); RealTickerHeight=32-2*(1);}
CalcIcWidth=600-2*(1);CalcIcHeight=32-2*(1);str2='';str2=str2+'<div style="position:relative;width'+RealTickerWidth+':px;height:'+RealTickerHeight+'px;left:0px;top:0px;overflow:hidden; visibility:visible;'+'border-style:groove; border-width:4px; border-color:#800148;'+'">';for(i=0;i<mc;i++){divh[i]='<div id="dh'+i+'" style="position:absolute; visibility:inherit;background:'+'#042C29'+'; COLOR:#F7C5B1;padding-top:'+4+'px;padding-left:'+0+'px;'+'left:0px; top:0; width:'+170+'px; height:'+(32-2*1)+'px; font-weight:'+'bold'+'; FONT-FAMILY: '+'Arial Narrow'+'; FONT-SIZE: '+'12'+'pt; font-style: '+'normal'+'; TEXT-DECORATION: '+'blink'+';margin:0px; overflow:hidden;text-align:'+'center'+';cursor: default;">';divtext[i]='<div id="d'+i+'" onmouseover="mdivmo('+i+')" onmouseout ="restime('+i+')" onclick="butclick('+i+')"'+' style="position:absolute;visibility:inherit;background:#75ABFC; COLOR:'+'#DA0024'+'; '+'padding-top:'+8+'px;padding-left:'+8+'px;'+' left:'+170+'px; top:0; width:'+(msgw-2*1-0)+'px;height:'+(32-2*1)+'px; FONT-FAMILY: '+'Cataneo BT'+'; FONT-SIZE: '+'10'+'pt; font-style: '+'normal'+'; font-weight: '+'normal'+'; margin:0px; TEXT-DECORATION: '+'none'+'; overflow:hidden;text-align:'+'left'+';cursor: default;">';str2=str2+'<div id="op'+i+'" style="position:absolute;overflow:hidden; visibility:hidden; left:0px; top:0px;width:'+CalcIcWidth+'px; height:'+CalcIcHeight+'px;border-style:solid;border-width:0px;">'; str2=str2+''+divh[i]+''+header[i]+'</div>'+divtext[i]+''+text[i]+'</div>'; str2=str2+'</div>';} str2=str2+'</div>'; function mdivmo(gnum){if(linka[gnum]!=''){objs[gnum].style.color='#B40000'; objs[gnum].style.cursor='pointer';window.status=''+linka[gnum]; }}function restime(gnum2){ objs[gnum2].style.color='#060606';window.status='';}function butclick(gnum3){if(linka[gnum3].substring(0,11)=="javascript:"){eval(""+linka[gnum3]);return;}if(targa[gnum3]==''){targa[gnum3]='_parent';} if(IEB) { window.open(''+linka[gnum3],''+targa[gnum3]);}else{if((targa[gnum3].indexOf("_parent")>-1)){eval("parent.window.location='"+linka[gnum3]+"'");}else if((targa[gnum3].indexOf("_top")>-1)){eval("top.window.location='"+linka[gnum3]+"'");}else{window.open(''+linka[gnum3],''+targa[gnum3]);}}}function zindx(){ objst[vnext].style.visibility="visible";objst[vcurr].style.zIndex=2;objst[vnext].style.zIndex=3;}function Sonraki(){vcurr=vnext;vnext=vnext+1;if(vnext>=mc){vnext=0;}}function dotrans(){if(vnext!=vcurr){if(IEB){spageObj.filters[0].apply();}objs[vnext].style.color='#060606';objst[vnext].style.visibility='visible';objst[vcurr].style.visibility='hidden';if(IEB){spageObj.filters[0].play();}}Sonraki();setTimeout('dotrans()',3000+4000);}function dotransff(){op=op-dif;if(op<(0.00)){op=0.00;}objst[vcurr].style.opacity = op;objst[vnext].style.opacity = 1.00-op;if(op>(0.00)){setTimeout('dotransff()',50);}else{objst[vcurr].style.zIndex=2;objst[vnext].style.zIndex=3;Sonraki();setTimeout('beftrans()',3000);}}function beftrans(){op=1.00;objst[vcurr].style.visibility="visible";objst[vnext].style.visibility="visible";objst[vcurr].style.zIndex=3; objst[vnext].style.zIndex=2;objst[vcurr].style.opacity = 1.00;objst[vnext].style.opacity = 1.00;dotransff();}function DoScrollUp(){ kalan=kalan-Math.ceil(kalan/(4000/1000));objst[vcurr].style.top=""+(kalan-CalcIcHeight)+"px"; objst[vnext].style.top=""+kalan+"px";if(kalan<=0){Sonraki();kalan=CalcIcHeight;objst[vnext].style.top=""+kalan+"px";zindx();timeo=setTimeout('DoScrollUp()',3000);}else{setTimeout('DoScrollUp()',50);}}function DoSlide(){kalan=kalan-Math.ceil(kalan/(4000/1000)); objst[vcurr].style.left=""+(kalan-CalcIcWidth)+"px"; objst[vnext].style.left=""+kalan+"px";if(kalan<=0){Sonraki();kalan=CalcIcWidth;objst[vnext].style.left=""+kalan+"px";zindx();timeo=setTimeout('DoSlide()',3000);}else{setTimeout('DoSlide()',50);}}function dofirst(){var i=0;for(i=0;i<mc;i++){objs[i]=document.getElementById("d"+i);objs[i].style.left=""+170+"px";objs[i].style.top="0px";objsh[i]=document.getElementById("dh"+i);objsh[i].style.left="0px";objsh[i].style.top="0px";objst[i]=document.getElementById("op"+i);objst[i].style.left="0px";objst[i].style.top="0px";objst[i].style.visibility="hidden";}objst[0].style.visibility="visible";if(2==2){kalan=CalcIcWidth;vnext=0;Sonraki();zindx();objst[vnext].style.left=""+kalan+"px";setTimeout('DoSlide()',3000);}else if(2==4){kalan=CalcIcHeight;vnext=0;Sonraki();zindx();setTimeout('DoScrollUp()',3000); }else if(2==5){if(IEB){setTimeout('dotrans()',3000);}else{setTimeout('beftrans()',3000);}}else{setTimeout('dotrans()',3000);}}function initte(){spageObj=document.getElementById('spage');if(!spageObj){setTimeout('initte()',200);}spageObj.innerHTML=str2;vnext=1;if(vnext>=mc){vnext=0;}spageObj.style.left="0px";spageObj.style.top="0px";setTimeout('dofirst()',100);}setTimeout('initte()',100);
//]]>
</script>
</div>
Ganti beberapa teks dan link di bawah ini dan sesuaikan dengan teks dan link yang ingin di tampilkan :
1. Teks dan Link pertama :
- Terima Bintang Uhuk
- Daftarkan segera di sekretariat calon bintang film uhuk
- http://lefransnote.blogspot.com/
2. Teks dan Link kedua :
- Gratis Pistol
- Senjata api untuk SATPOL PP. Ditanggung Gratis dan mematikan!
- http://lefransnote.blogspot.com/
3. Teks dan Link ketiga
- lefransnote
- Selamat datang dan selamat menikmati semoga bermanfaat
- http://lefransnote.blogspot.com/
Apabila ingin menambahkan teks baru, silahkan tambahkan kode baru seperti ini ;
Daftarkan segera di sekretariat calon bintang film uhuk!";
text[1] = "Dapatkan segera senjata api tanpa pelatuk di gerai kami!";
text[2] = "Selamat datang dan selamat menikmati semoga bermanfaat";
text[3] = "Tuliskan teks baru di sini";
text[4] = "Tuliskan teks baru di sini";
header[0] = "Terima Bintang Uhuk :";
header[1] = "Gratis Pistol :";
header[2] = "lefransnote !";
header[3] = "Tulis judul baru di sini ";
header[4] = "Tulis judul baru di sini ";
linka[0] = "http://lefransnote.blogspot.com/";
linka[1] = "http://lefransnote.blogspot.com/";
linka[2] = "http://lefransnote.blogspot.com/";
linka[3] = "Tuliskan link baru di sini/";
linka[4] = "Tuliskan link baru di sini/";
targa[0] = "_parent";
targa[1] = "_parent";
targa[2] = "_parent";
targa[3] = "_parent";
targa[4] = "_parent";
Untuk merubah posisi/letak Ticker, silahkan rubah nilai margin-left (jarak dari pojok kiri) dan margin-top (jarak dari atas).
Lihat kode yang seperti ini :
margin-left:0px;margin-top:0px;
Cobalah untuk merubahnya menjadi seperti ini :
margin-left:200px;margin-top:200px; (lihat hasilnya).
0 komentar:
Posting Komentar
silahkan tinggalkan komentar