Cara Buat dan Pasang Ticker 2 Kolom

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.

Silahkan KLIK DEMO untuk melihat Simple Ticker.

D E M O

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;">
<script type="text/javascript">
//<![CDATA[
/* bgsGR_BlinkTicker.js gubhug reyot */
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] = "gubhug reyot !";
linka[0] = "http://bloggerstuars.blogspot.com/";
linka[1] = "http://gubhugreyot.blogdetik.com/";
linka[2] = "http://gubhugreyot.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>

Langkah Pembuatan Ticker 2 Kolom

1. Login to BloGGeR (login ke BloGGeR) : Gunakan dan Tulis User Name (Nama Pengguna) atau Email Address serta Password (Sandi/Kode Rahasia).
2. Dasboard (Dasbor) : Sesaat setelah login maka kita akan melihat halaman Dasbor. KLIK link Layout/Tata Letak atau Design/Rancangan.
3. Layout/Tata Letak (Design/Rancangan) : KLIK Add Gadget (Tambah Gadget).
4. HTML/Javascript : KLIK pada teks atau gambar yang bertuliskan HTML/Javascript.
5. Copy-Paste : Copy dan Paste Seluruh kode HTML dan Javascript di box yang tersedia.
6. SAVE (Simpan) : KLIK SAVE/Simpan, kemudian buka blog (open your blog) untuk melihat hasilnya.

Keterangan/Catatan :

1. 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://bloggerstuars.blogspot.com/
   
   2. Teks dan Link kedua :
   - Gratis Pistol
   - Senjata api untuk SATPOL PP. Ditanggung Gratis dan mematikan!
   - http://gubhugreyot.blogdetik.com/
   
   3. Teks dan Link ketiga
   
   - gubhug reyot
   - Selamat datang dan selamat menikmati semoga bermanfaat
   - http://gubhugreyot.blogspot.com/
2. Apabila ingin menambahkan teks baru, silahkan tambahkan kode baru seperti ini ;



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";
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] = "gubhug reyot !";
header[3] = "Tulis judul baru di sini ";
header[4] = "Tulis judul baru di sini ";
linka[0] = "http://bloggerstuars.blogspot.com/";
linka[1] = "http://gubhugreyot.blogdetik.com/";
linka[2] = "http://gubhugreyot.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";

3. 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).
   
4. setelah selesai dicoba dan dibuat, sampeyan bisa upload javascriptnya, kemudian manfaatkan link hasil upload untuk mengganti javascript yang masih terurasi. Bentuknya akan menjadi seperti ini :

<div id="spage" style="position:absolute;margin-left:0px;margin-top:0px;width:600px;height:38px;overflow:hidden;">
<script src="http://..../..../bgsGRticker2Kolom.js" type="text/javascript">
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «