Membuat Efek Animasi Bintang Bertabur Pada Cursor Blog

Baca Juga

Pada tutorial terdahulu saya sudah menuliskan tutorial Cara Mengganti Kursor Blogger Dengan Kursor Unik, dan pada kesempatan kali ini saya akan menuliskan tutorial blog yang masih berafiliasi dengan Cursor, yaitu Cara Membuat Efek Animasi Bintang Bertabur Pada Cursor Blog.

Mungkin teman pernah melihat sebuah blog yang memakai imbas animasi ini, yang mana jikalau cursor / mouse kita gerakkan pada blog tersebut maka akan ada imbas menyerupai bintang bertaburan, nah bagi teman yang juga ingin menciptakan imbas animasi bintang bertaburan pada cursor blog, maka silakan baca terus dan praktikkan tutorial cara menciptakan imbas animasi bintang bertabur pada cursor blog ini.

Di sini saya akan menuliskan cara menciptakan imbas animasi bintang bertabur pada cursor blog yang paling gampang dan cepat.

Cara Membuat Efek Animasi Bintang Bertabur Pada Cursor Blog

Untuk menciptakan imbas animasi bintang bertaburan pada cursor blog, maka langkah - langkah yang harus dilakukan ialah sebagai berikut :

1. Masuk ke dasbor blogger
2. Buka halaman Tata Letak
3. Klik Tambahkan Gadget / Add a Gadget, lalu pilih Gadget HTML/JavaScript
4. Masukkan script imbas animasi bintang bertaburan pada bab Konten / Content
5. Setelah itu klim Simpan / Save

Adapun isyarat script imbas animasi bintang bertaburan pada blog yang harus teman masukkan pada bab Kontent widget HTML/JavaScript ialah ini

<script type='text/javascript'> // <![CDATA[ var colour="#0000ff"; var sparkles=100; 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="3px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="3px"; 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=colour; return (div); } // ]]> </script>

Nah itulah langkah - langkah cara menciptakan imbas animasi bintang bertabur pada cursor blog serta script imbas animasi bintang bertaburan yang dapat teman gunakan.

Selamat mencoba, dan gampang - mudahan ada manfaatnya.