How to add Snow Falling For your Blogger Blog ~ MyBlogTrickz

How to add Snow Falling For your Blogger Blog

Posted by Unknown On Saturday, 10 December 2011 0 comments

Welcome Your Visitors with new Snow falling.This is a simple script which can add your Blog/Website an attractive look.

How To Add Colorful Snow Falling in Blogger

Go To Blogger > Design
Choose HTML/Javascript gadget
Copy n Paste Below Code Into It

<script type="text/javascript">


      //Configure below to change URL path to the snow image
      var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggpswxEoy92_hdZOr7SqSgxpIWVSqmTs2VhCyFnfNXQi97hOsVLylUyr4hI4pIjwTTtjeTiJY9vOujgy26PqXYYx9eWDFguryxhmttEvyZFzV4IAYQ-yPo2uVizNH_NcRzH-V_Q9Jv_4BR/s1600/snow.gif"
      // Configure below to change number of snow to render
      var no = 15;
      // 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)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggpswxEoy92_hdZOr7SqSgxpIWVSqmTs2VhCyFnfNXQi97hOsVLylUyr4hI4pIjwTTtjeTiJY9vOujgy26PqXYYx9eWDFguryxhmttEvyZFzV4IAYQ-yPo2uVizNH_NcRzH-V_Q9Jv_4BR/s1600/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>

Make these changes:

To set the number of snow balls edit the number 15

To change the snow image replace the Blue link with yours

If you want use white soft snow rather than snow flakes then use this link:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdclspFhVFuvYRgY2NuEIkbW-7btFqxKTiY-XC_QWWIYytTkO423z54bnfIGi29kPyoxvx7dHqqQZx97KYW1d9CuaVo_Y4EwB6S-7Wo9Aa1LHA6cPJR8URR_kLC6koIKv-D0fUpPaDurGj/s1600/falling-snow.png

Why not some red colorful snow?

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtpHn51kp8fuzXWgXMA7tMqmYGgpp-kZ6rjgyDYQyHdFg9mJcbvFsGwHYtefVeg3RDpFOXyWY_qEr0iqDWBBugWJK58h34oCsF9JbqOpUmZeeTbFVIIPmg8DqjLA0QMPf57v_fwKE5MXE/s1600/red-snow.png

You can replace the image with anything you wish. You can also display falling autumn leaves, falling new year message,falling diamonds or even falling hearts! Just play with the code and keep changing the styles.

Save your widget and drag it to the top most position possible near header as shown below.

5. Click the orange save button on your page elements and you are all done!

Visit your blogs to see beautiful snow falling on your blog giving a Christmas touch of winter. Have fun!

0 comments:

Follow @My_World