Tips Membuat Animasi/Efek Bintang Jatuh di Cursor Blogspot

Tips membuat animasi atau efek bintang jatuh di cursor blogspot dengan simple, mudah dan works tenan. Bagi yang suka berkreasi dalam mempercantik dan memperganteng tampilan blogspotnya. Animasi bintang jatuh pada cursor ini seperti efek bintang bertaburan yang jatuh dari cursor, setiap kali cursor tersebut bergerak. Meskipun blog agan terlihat unyu-unyu setelah memasang animasi ini, jangan khawatir masih banyak pengunjung diluar sana yang akan lebih betah untuk berlama-lama di blog agan. Gimana tidak, kapan lagi coba, bisa lihat bintang jatuh di komputer kita. Jatuhnya dari kursor pula bukan langiet. :v

Dengan memasang efek bintang jatuh di blog agan, akan meningkatkan durasi pengunjung di blog agan. amin, kita do'a sama-sama. :)

Related Article - Tips Menambah Fitur Emoticon Pada Komentar Blogspot

Ok, untuk lebih memahami langsung saja kita praktik, berikut langka-langkahnya:

1. Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
2. Pilih menu "Template"
3. Pilih "Edit HTML"
4. Gunakan CTRL+F, Cari kode </head>
5. Kalo sudah ketemu, monggo copy kode Javascript dibawah ini, dan paste tepat diatas kode </head>
   
   
   <script type='text/javascript'>

   // <![CDATA[

   var colour="#52D8ED"; // Kode warna ini bisa diganti warna yang lain
   

   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>

Related Article - Tips Membuat Animasi Image Artikel Blogspot

Demikian artikel tentang tips membuat animasi/efek bintang jatuh di cursor blogspot kali ini, semoga bermanfaat. :)

› Read More