Membuat Efek Bintang Jatuh pada Kursor Blogger

Membuat Efek Bintang Jatuh pada Kursor Blogger

Membuat efek bintang jatuh di kursor Blogger

Dalam posting kali ini saya akan membahas tentang mengatur appearance dari sebuah blog, ya penampilan blog. Umumnya kebanyakan orang suka bila mempunyai tampilan blog yang terkesan lebih ramai dan berwarna-warni.

Hal ini sebenarnya sah-sah saja, sebab hal itu juga mungkin akan menarik perhatian pengunjung sehingga akan berminat berkunjung kembali, atau agar pengunjung di blog tidak merasa bosan.

Di sini saya akan membahas tentang salah satu cara membuat blog terlihat lebih cantik, yaitu dengan membuat efek bintang jatuh pada saat kursor bergerak di Blogger. Efek ini akan menampilkan kerlap-kerlip yang berjatuhan pada saat kursor digerakkan, namun perlu teman-teman ketahui bahwa efek ini hanya bekerja sementara.

Apa maksudnya? Hanya bekerja pada tempat tertentu dan pada masa tertentu, yaitu hanya akan tampil pada halaman blog yang dipasangi efek tersebut dan tidak akan tampil lagi jika sudah tidak membuka halaman blog tersebut, termasuk tidak tampil pada desktop sebuah Windows. Kode ini akan bekerja secara otomatis ketika blog dibuka dan kode diterjemahkan oleh mesin.


Sebelum memasangnya kamu bisa melihat contoh efek tersebut pada halaman demo di atas. Untuk memasang efek bintang jatuh pada Blogger saat kursor bergerak, kamu bisa mengikuti langkah-langkah berikut ini:
  1. Buka Blogger
  2. Pada bagian Tata Letak klik Tambah Gadget
  3. Pilih widget HTML/Javascript
  4. Tambahkan kode berikut pada konten widget tersebut
  5. <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>
  6. Ganti bagian yang ditandai dengan kode HEX warna yang kamu inginkan
  7. Klik tombol Simpan dan lihat hasilnya di blog kamu

Penutup

Itulah beberapa langkah yang bisa kamu lakukan untuk memasang efek bintang jatuh pada saat kursor digerakkan di halaman blog pada Blogger. Semoga artikel ini bisa bermanfaat untuk kamu. Jika ada hal yang kurang jelas, maka jangan sungkan untuk memberikan komentar kamu di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Related Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel