Home Blogging

Cara Membuat Efek Tulisan / Text Pada Cursor Mouse

• min read
Table of Contents
Halo sahabat Bangiz, berikut ini Bangiz masih berbagi seputar cara untuk mempercantik tampilan blog untuk lebih tepatnya yaitu tentang bagaimana cara menambahkan efek pada kursor mouse. Setelah sebelumnya berbagi postingan tentang:
Cara Membuat Efek Salju Pada Cursor Mouse

Dalam trik kali ini, kursor mouse pada blog Anda akan ada tulisan yang mengikuti ketika digerakkan, tulisannya bebas Anda tentukan sendiri. Jika tertarik, silahkan ikuti caranya sebagai berikut:
efek tulisan
Gambar efek
1. Silahkan tambahkan kode HTML/Javascript berikut ini:
    Jika belum tahu cara menambahkan HTML/Javascript silahkan baca dulu di sini
<script language="javascript">// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.var text='Tuliskan kata-kata Anda Disini';var delay=40; // SPEED OF TRAILvar Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIESvar beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.//********** NO NEED TO EDIT BELOW HERE **********\\ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;ie4 = (document.all && !document.getElementById)? true : false;ie5 = (document.all && document.getElementById)? true : false;ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;var txtA=new Array();text=text.split('');var x1=0;var y1=-1000;var t='';for(i=1;i<=text.length;i++){t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';t+=beghtml+text[i-1]+endhtml;t+=(ns4)? '</layer>' : '</div>';}document.write(t);function moveid(id,x,y){if(ns4)id.moveTo(x,y);else{id.style.left=x+'px';id.style.top=y+'px';}}function animate(evt){x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);}function getidleft(id){if(ns4)return id.left;else return parseInt(id.style.left);}function getidtop(id){if(ns4)return id.top;else return parseInt(id.style.top);}function getwindowwidth(){if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;else return window.innerWidth+pageXOffset;}function movetxts(){for(i=text.length;i>1;i=i-1){if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){moveid(txtA[i-1],0,-1000);moveid(txtA[i],0,-1000);}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));}moveid(txtA[1],x1,y1);}
window.onload=function(){for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);if(ns4)document.captureEvents(Event.MOUSEMOVE);document.onmousemove=animate;setInterval('movetxts()',delay);}</script>
2. Jangan lupa Simpan dan lihat hasilnya.

 Keterangan:
  • <-- berwarna="" ganti="" gt="" silahkan="" span="" style="color: red;" tulisan="" yang="">Silahkan ganti tulisan berwarna <-- berwarna="" ganti="" gt="" silahkan="" span="" style="color: red;" tulisan="" yang="">merah dengan kata-kata Anda.
  • Yang berwarna biru merupakan kode warna, untuk menggantinya silahkan lihat disini atau disini.
Sekian tutorial kali ini tentang bagaimana cara membuat efek tulisan pada kursor mouse untuk Blogger. Jangan lupa ikuti kami untuk mendapatkan info menarik lainnya.