Cara Membuat Cursor Diikuti Tulisan

"Bos minta tutor mouse seperti boss...." sobat yang mengidentitaskan dirinya sebagai dark menulis di Cbox Oce Satria (Eh, emang gw boss apaan?). Maksud si dark tentu cursor di blog ini yang selalu diintilin oleh tulisan "WELCOME TO SembarangKlik!"

Oke, biar nggak batea-tea (itu bahasa oranag padangpanjang, artinya bertele-tele) kita langsung ke TKP aja ya!

1. Masuk ke Dashboard dengan Login ke blogger: www.blogger.com
2. Klik Rancangan dan pada Elemen Halaman klik tambah Gadget
3. Klik HTML/JavaScript
4. Copy dan paste kode java script dibawah ini dan masukan ke dalam kotak HTML/javascript tadi. Udah segitu aja.

<script language="javascript"><br /><br /> // ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.<br /> var text='<span style="color: blue;">CANTUMKAN TULISAN DI SINI, TERSERAH MAU NAMA, KATA-KATA MUTIARA, ATAU MISALNYA 'I LOVE YOU'</span>';<br /><br /> var delay=40; // SPEED OF TRAIL<br /> var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)<br /> var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)<br /> var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES<br /> var beghtml='<font color="#00436e"><b>'; // <br />OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS <br />FONT COLOR, SIZE, ETC.<br /> var endhtml='</b></font>'; // END HTML CODE. MOSTLY <br />USED IF ABOVE SETTING IS USED.<br /><br /> ns4 = (navigator.appName.indexOf("Netscape")>=0 && <br />document.layers)? true : false;<br /> ie4 = (document.all && !document.getElementById)? true : false;<br /> ie5 = (document.all && document.getElementById)? true : false;<br /> ns6 = (document.getElementById && <br />navigator.appName.indexOf("Netscape")>=0 )? true: false;<br /> var txtA=new Array();<br /> text=text.split('');<br /> var x1=0;<br /> var y1=-1000;<br /> var t='';<br /><br /> for(i=1;i<=text.length;i++){<br /> t+=(ns4)? '<layer left="0" top="-100" <br />width="'+txtw+'" name="txt'+i+'" <br />height="1">' : '<div <br />id="txt'+i+'" style="position:absolute; top:-100px; left:0px; <br />height:1px; width:'+txtw+'; visibility:visible;">';<br /> t+=beghtml+text[i-1]+endhtml;<br /> t+=(ns4)? '</layer>' : '</div>';<br /> }<br /> document.write(t);<br /> function moveid(id,x,y){<br /> if(ns4)id.moveTo(x,y);<br /> else{<br /> id.style.left=x+'px';<br /> id.style.top=y+'px';<br /> }}<br /> function animate(evt){<br /> x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);<br /> y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);<br /> }<br /><br /> function getidleft(id){<br /> if(ns4)return id.left;<br /> else return parseInt(id.style.left);<br /> }<br /><br /> function getidtop(id){<br /> if(ns4)return id.top;<br /> else return parseInt(id.style.top);<br /> }<br /><br /> function getwindowwidth(){<br /> if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;<br /> else return window.innerWidth+pageXOffset;<br /> }<br /><br /> function movetxts(){<br /> for(i=text.length;i>1;i=i-1){<br /> if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){<br /> moveid(txtA[i-1],0,-1000);<br /> moveid(txtA[i],0,-1000);<br /> }else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));<br /> }<br /> moveid(txtA[1],x1,y1);<br /> }<br /><br /> window.onload=function(){<br /> for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?d<br />ocument.all['txt'+i]:document.getElementById('txt'+i);<br /> if(ns4)document.captureEvents(Event.MOUSEMOVE);<br /> document.onmousemove=animate;<br /> setInterval('movetxts()',delay);<br /> }<br /> </script>

Catatan: sayangnya kode ini hanya bisa jalan pada template tertentu saja. Bagi yang mau silakan coba, mana tau bisa

Happy blogging Sobat!