Step 2: Just Add the below chunk of code between your < BODY > tags to create the effect.

<script language="JavaScript"> <!-- mikesfreegifs.com thanks kurt.grigg@virgin.net n=30; n4=(document.layers); n6=(document.getElementById&&!document.all); ie=(document.all); d=(n4||ie)?'document.':'document.getElementById("'; a=(n4||n6)?'':'all.'; n6r=(n6)?'")':''; s=(n4)?'':'.style'; var h,w; function Screen(){ h=(ie)?document.body.clientHeight:window.innerHeight; w=(ie)?document.body.clientWidth:window.innerWidth; } Screen(); window.onresize=Screen; y=new Array(); x=new Array(); stars = new Array(); speed = new Array(); col = new Array('#777777','#aaaaaa','#cccccc','#ffffff'); for (i=0; i < n; i++){ var size=1+Math.random()*2; if (!n4) document.write("<div id='strs"+i+"' style='position:absolute;top:0px;left:0px;width:"+size+"px;height:"+size+"px;background:#ffffff;font-size:"+size+"px'></div>"); if (n4) document.write("<layer name='strs"+i+"' top=0 left=0 bgcolor=#000000 width="+size+" height="+size+"></layer>"); } //Initial. for (i=0; i < n; i++){ y[i]=Math.random()*h; x[i]=Math.random()*w; var itemp=eval(d+a+"strs"+i+n6r+s); itemp.top=y[i]; itemp.left=x[i]; var rcol = col[Math.floor(Math.random()*col.length)]; (n4)?itemp.bgColor=rcol:itemp.background=rcol; if (rcol == col[0]) speed[i]=1+Math.random()*1; else if (rcol == col[1]) speed[i]=2+Math.random()*2; else if (rcol == col[2]) speed[i]=4+Math.random()*2; else speed[i]=6+Math.random()*2; } function fly(){ sy=(ie)?document.body.scrollTop:window.pageYOffset; sx=(ie)?document.body.scrollLeft:window.pageXOffset; for (i=0; i < n; i++){ x[i]-=speed[i]; //Could randomize everything again but kept simple for slower computers. if (x[i] < -10){ x[i]=w-((n6)?20:10); y[i]=Math.round(Math.random()*h-10); } var temp=eval(d+a+"strs"+i+n6r+s); temp.top=y[i]+sy; temp.left=x[i]+sx; } setTimeout('fly()',10); } //--> </script>