Tutorial cara buat efek hujan pada blog

Tutorial ni buat blog aku basah dan hampir banjir...hehehe

Tengok saja live demo pada blog ni..habis basahkan..hahaha




Cara buat efek hujan pada blog senang saja...sama macam pasang widget lain

Mula2 pergi ke desbot---desaign---ada gajet---html/javascript...

Copy code di bawah kemudian save....senangkan

<script type="text/javascript">
// <![CDATA[
var speed=33; // makin kecil makin laju
var drops=100; // jumlah hujan
var colour="#999"; // warna hujan
/***************************\
*   Hujan di tengah hari  *
* (c) 2011 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* tutorial By P0L5K4H4CKR3W *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var swide, shigh, boddie, ifs;
window.onload=function() { if (document.getElementById) {
  var r1, r2;
  ifs=is_fixed_supported();
  boddie=document.createElement("div");
  if (ifs) boddie.style.position="fixed";
  else boddie.style.position="absolute";
  boddie.style.top="0px";
  boddie.style.left="0px";
  document.body.appendChild(boddie);
  set_width();
  for (var i=0; i<drops; i++) {
    flks[i]=createDiv(16, 2, "transparent");
    r1=createDiv(6, 2, colour);
    r1.style.top="10px";
    r1.style.left="0px";
    flks[i].appendChild(r1);
    r2=createDiv(10, 2, colour);
    r2.style.top="0px";
    r2.style.left="0px";
    if (navigator.appName=="Microsoft Internet Explorer") r2.style.filter="alpha(opacity=25)";
    else r2.style.opacity=0.25;
    flks[i].appendChild(r2);
    flkx[i]=2*Math.floor(Math.random()*swide/2);
    flky[i]=Math.floor(Math.random()*shigh);
    fldy[i]=2+Math.floor(Math.random()*4);
    flks[i].style.left=flkx[i]+"px";
    flks[i].style.top=flky[i]+"px";
    boddie.appendChild(flks[i]);
  }
  setInterval("cats_and_dogs()", speed);
}}

function is_fixed_supported() {
  var container=document.body;
  if (document.createElement && container && container.appendChild && container.removeChild) {
    var el=document.createElement("div");
    if (!el.getBoundingClientRect) return false;
    el.innerHTML="x";
    el.style.cssText="position:fixed;top:100px;";
    container.appendChild(el);
    var originalHeight=container.style.height, originalScrollTop=container.scrollTop;
    container.style.height="3000px";
    container.scrollTop = 500;
    var elementTop=el.getBoundingClientRect().top;
    container.style.height = originalHeight;
    var isSupported=(elementTop===100);
    container.removeChild(el);
    container.scrollTop=originalScrollTop;
    return isSupported;
  }
  return false;
}

function createDiv(height, width, colour) {
  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);
}

window.onresize=set_width;
function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
  swide-=2;
}

window.onscroll=set_scroll;
function set_scroll() { if (!ifs) {
  var sleft, sdown;
  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;
  }
  boddie.style.top=sdown+"px";
  boddie.style.left=sleft+"px";
}}

function cats_and_dogs(c) {
  var i, x, o=0;
  for (i=0; i<drops; i++) {
    flky[i]+=fldy[i];
    if (flky[i]>=shigh-16) {
      flky[i]=-16;
      fldy[i]=2+Math.floor(Math.random()*4);
      flkx[i]=2*Math.floor(Math.random()*swide/2);
      flks[i].style.left=flkx[i]+"px";
    }
    flks[i].style.top=flky[i]+"px";
  }
}
// ]]>
</script>

Sekian