Cara Membuat Bintang Jatuh Pada Kursor Blog

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

Hallo , pernahkah liat saat berkunjung ke suatuweb terus ada bintang-bintang atau efek salju yang jatuh dari kursor mouse ?
Mungkin kamu mau tau bagaimana sih membuatnya, bisa juga untuk mempercantik blog atau web kamu juga.
Yuk disimak caranya.

1. Login ke Dsshboard Blogger.
2. Pilih Tata Letak > Add Gadget > HTML/Javascript.
3. Masukkan kode dibawah ini ke kolom HTML/Javascript.
4. Klik Simpan.

<script type="text/javascript">
var color="#333";var sparkles=65;var x=ox=400;var y=oy=300;var swide=800;var shigh=600;var sleft=sdown=0;var tiny=new Array();var star=new Array();var starv=new Array();var starx=new Array();var stary=new Array();var tinyx=new Array();var tinyy=new Array();var tinyv=new Array();window.onload=function(){if(document.getElementById){var i,rats,rlef,rdow;for(var i=0;i<sparkles;i++){var rats=createDiv(3,3);rats.style.visibility="hidden";document.body.appendChild(tiny[i]=rats);starv[i]=0;tinyv[i]=0;var rats=createDiv(5,5);rats.style.backgroundColor="transparent";rats.style.visibility="hidden";var rlef=createDiv(1,5);var rdow=createDiv(5,1);rats.appendChild(rlef);rats.appendChild(rdow);rlef.style.top="2px";rlef.style.left="0px";rdow.style.top="0px";rdow.style.left="2px";document.body.appendChild(star[i]=rats);}
set_width();sparkle();}}
function sparkle(){var c;if(x!=ox||y!=oy){ox=x;oy=y;for(c=0;c<sparkles;c++)if(!starv[c]){star[c].style.left=(starx[c]=x)+"px";star[c].style.top=(stary[c]=y)+"px";star[c].style.clip="rect(0px, 5px, 5px, 0px)";star[c].style.visibility="visible";starv[c]=50;break;}}
for(c=0;c<sparkles;c++){if(starv[c])update_star(c);if(tinyv[c])update_tiny(c);}
setTimeout("sparkle()",40);}
function update_star(i){if(--starv[i]==25)star[i].style.clip="rect(1px, 4px, 4px, 1px)";if(starv[i]){stary[i]+=1+Math.random()*3;if(stary[i]<shigh+sdown){star[i].style.top=stary[i]+"px";starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";}
else{star[i].style.visibility="hidden";starv[i]=0;return;}}
else{tinyv[i]=50;tiny[i].style.top=(tinyy[i]=stary[i])+"px";tiny[i].style.left=(tinyx[i]=starx[i])+"px";tiny[i].style.width="2px";tiny[i].style.height="2px";star[i].style.visibility="hidden";tiny[i].style.visibility="visible"}}
function update_tiny(i){if(--tinyv[i]==25){tiny[i].style.width="1px";tiny[i].style.height="1px";}
if(tinyv[i]){tinyy[i]+=1+Math.random()*3;if(tinyy[i]<shigh+sdown){tiny[i].style.top=tinyy[i]+"px";tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";}
else{tiny[i].style.visibility="hidden";tinyv[i]=0;return;}}
else tiny[i].style.visibility="hidden";}
document.onmousemove=mouse;function mouse(e){set_scroll();y=(e)?e.pageY:event.y+sdown;x=(e)?e.pageX:event.x+sleft;}
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;}}
window.onresize=set_width;function set_width(){if(typeof(self.innerWidth)=="number"){swide=self.innerWidth;shigh=self.innerHeight;}
else if(document.documentElement&&document.documentElement.clientWidth){swide=document.documentElement.clientWidth;shigh=document.documentElement.clientHeight;}
else if(document.body.clientWidth){swide=document.body.clientWidth;shigh=document.body.clientHeight;}}
function createDiv(height,width){var div=document.createElement("div");div.style.position="absolute";div.style.height=height+"px";div.style.width=width+"px";div.style.overflow="hidden";div.style.backgroundColor=color;return(div);}
</script>

5. Lihat hasilnya.

Lihat Demo

Bagaimana mudahkan Cara Membuat Bintang Jatuh Pada Kursor Blog. Selain membuat tampilan blog kamu jadi lebih keren tapi juga memperberat loading blog.