Cara Buat Kursor Berbuih Bila DiGerakan

Click Here!

Dalam beberapa siri tutorial yang lalu saya ada memberikan tutorial cara untuk memasang kursor bintang berjatuhan .Tetapi kali ini adalah dalam bentuk gelembung buih yang akan naik keatas bila kursor digerakkan.

Berikut adalah cara memasangnya :
1. Log in ke akaun blogger anda

 2.   Login ke Blogger 
 3.   Klik Pada Design → Page elements
 4.    Add a Gadget → HTML/JavaScript

Salin kod /copy and paste kod di bawah ini ( klik highlight all )

<script type="text/javascript" src="https://sites.google.com/site/teknikbuatblog/tbb/kursorbuih.js"></script><script type="text/javascript"> // <![CDATA[ var colours=new Array("#695DA2", "#695DA2", "#695DA2", "#695DA2", "#695DA2"); // colours for top, right, bottom and left borders and background of bubbles var bubbles=100; // maximum number of bubbles on screen /**************************** * JavaScript Bubble Cursor * *(c) 2009 mf2fm web-design * ****************************/ var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; div.opacity=0.5; if (document.all) div.filter="alpha(opacity=50)"; document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }} function bubble() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); } function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; } window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } // ]]> </script>

5. Klik save dan publish post

Sehingga disini dulu perkongsian saya buat kali ini saya akan update anda apabila mendapat terdapat info terbaru

ARTICLE LAIN YANG MUNKIN ANDA MINATI

Buat blog anda sendiri

Ucapan selamat datang kepada pengunjung yang melawati blog anda
Ucapan terima kasih kepada pengunjung semasa meninggalkan blog anda
Cara membuat perkataan mengikuti kursor 
Cara memasang kursor dengan bintang berbagai warna berjatuhan 
Cara letak efek salji berjatuhan 
Cara Pasang Butang Share Melayang
Letak Stesen Radio Dalam Blog Anda 
Cara Pasang Burung Twitter Terbang
Memasang Google Translater
Cara Pasang Face Book Like Button
Design Blog Anda Sendiri 
Tutorial Letak Kelopak Bunga Berguguran Di Blog 
Cara Buat Kursor Berbuih Bila DiGerakan

Selamat mencuba dan nantikan tutorial seterusnya dari saya
Dan jangan lupa klik +1 dibawah jika anda menyukai artikel ini

Click Here!