Belajar Membuat Efek Salju pada Pointer Mouse

Memasang efek salju salju pada pointer mouse di blog kita tidaklah wajib buat dilakukan. ini hanya untuk menambah hiasan di blog kita. Efek salju ini akan berfungsi setiap kali kita menggerakan pointer mouse kita di atas blog....

nah bagi kamu yang pengen di blognya juga muncul efek yang satu silahkan ikuti langkah-langkah berikut :

1. Login ke Blog dengan akun kamu
2. Pilih Tata Letak atau Rancangan
3. Pilih Elemen Laman
4. Klik Add Gadget --> HTML/Java Script
5. Lalu copy paste kode dibawah ini :

   <script type='text/javascript'>
   // <![CDATA[
   var colour="white";
   var sparkles=200;
   
   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>

   Pada bagian :
   var colour="white";
   Bagian ini menunjukkan bagaimana warna salju akan ditampilkan. Anda bisa menggantinya dengan warna lain. Seperti yang saya lakukan pada blog saya, saya menggantinya dengan warna "fuchsia" atau bisa ditulis dengan basis bilangan hexadesimal, yaitu : "#FF00FF.
   
    Pada bagian :
   var sparkles=200;
   Bagian ini menunjukkan berapa total salju yang akan ditampilkan setiap setTimeout.
   setTimeout, digunakan untuk menunjukkan berapa lama sekali akan terjadi perubahan (dalam satuan milisecond). Pada contoh ini saya menentukan bahwa perubahannya adalah setiap 40milisecond sekali. Perubahannya terjadi setiap onmousemove, maksudnya ialah perubahan terjadi setiap ada pergerakan mouse.
   
   
6. Save Gadget.