Snow Falling on Your Blog in This Winter

Hello my little fellow friends, this winter I’m going to give you a little trick to modify your blog’s appear. You all know in winter season there is snow falling on your ground. So to day I’m going to teach how to create a snow falling effect to your blog (As show on my blog). I think now you are interested about it. I’m sure this will delight your blog visitors.  Easy to set up, I’ll tell you step by step.

1. Sign up to your blogger account and go to Design

2. Page Elements > Add a Gadget > Choose HTML/Javascript gadget

3. Paste the following code in to it

   <script type="text/javascript">
     //Configure below to change URL path to the snow image
     var snowsrc="http://3.bp.blogspot.com/--hEgrJEXAzo/Tt-5f_2SzAI/AAAAAAAAFi8/Uf-    VH61UbDY/s400/snow.gif"
     // Configure below to change number of snow to render
     var no = 25;
     // Configure whether snow should disappear after x seconds (0=never):
     var hidesnowtime = 0;
     // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
     var snowdistance = "pageheight";
   ///////////Stop Config//////////////////////////////////
     var ie4up = (document.all) ? 1 : 0;
     var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
       function iecompattest(){
      return (document.compatMode && document.compatMode!="BackCompat")?    document.documentElement : document.body
       }
     var dx, xp, yp;    // coordinate and position variables
     var am, stx, sty;  // amplitude and step variables
    var i, doc_width = 800, doc_height = 600;

     if (ns6up) {
       doc_width = self.innerWidth;
       doc_height = self.innerHeight;
     } else if (ie4up) {
       doc_width = iecompattest().clientWidth;
       doc_height = iecompattest().clientHeight;
     }
     dx = new Array();
     xp = new Array();
     yp = new Array();
     am = new Array();
     stx = new Array();
     sty = new Array();
     snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "http://3.bp.blogspot.com/--hEgrJEXAzo/Tt-   5f_2SzAI/AAAAAAAAFi8/Uf-VH61UbDY/s400/snow.gif" : snowsrc
     for (i = 0; i < no; ++ i) {
       dx[i] = 0;                        // set coordinate variables
       xp[i] = Math.random()*(doc_width-50);  // set position variables
       yp[i] = Math.random()*doc_height;
       am[i] = Math.random()*20;         // set amplitude variables
       stx[i] = 0.02 + Math.random()/10; // set step variables
       sty[i] = 0.7 + Math.random();     // set step variables
           if (ie4up||ns6up) {
         if (i == 0) {
           document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +";  VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img    src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
         } else {
           document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +";  VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
         }
       }
     }
     function snowIE_NS6() {  // IE and NS6 main animation function
       doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
           doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up    && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera &&   snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
       for (i = 0; i < no; ++ i) {  // iterate for every dot
         yp[i] += sty[i];
         if (yp[i] > doc_height-50) {
           xp[i] = Math.random()*(doc_width-am[i]-30);
           yp[i] = 0;
           stx[i] = 0.02 + Math.random()/10;
           sty[i] = 0.7 + Math.random();
         }
         dx[i] += stx[i];
         document.getElementById("dot"+i).style.top=yp[i]+"px";
         document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
       }
       snowtimer=setTimeout("snowIE_NS6()", 10);
     }
       function hidesnow(){
           if (window.snowtimer) clearTimeout(snowtimer)
           for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
       }
     
   if (ie4up||ns6up){
       snowIE_NS6();
           if (hidesnowtime>0)
           setTimeout("hidesnow()", hidesnowtime*1000)
           }
   </script>

Changes>>>>

If you want to change the no of snow balls edit the No 25

Also you can change the snow ball by replacing “http://1.bp.blogspot.com/-3sRQD2PvIjQ/TvVc9B332cI/AAAAAAAAAJI/fjR9LTpct9I/s1600/Snow.png.png” link with yours

I think now you are also delighted by inserting this snow falling effect to your blog in this Christmas season. Keep in touch with Bloggers more blogger tricks coming soon

Posted in: Blog Tricks