Download this Blogger Template by Clicking Here!

Ad 468 X 60

Ad 468 X 60

Friday 13 June 2014

NEW

How To Add Christmas Snow Fall Effect in Blogger

Posted by Unknown , Be the first to comment!









Adding Special effects to your blog is a best way of blogging. Especially, Cool effects will make good impressions on your blog. I'm going to introduce a special snow falling effect over Css style codes. It is simply super for blogger blogs. Snow falling effect can be added to your blog without the help of java script. We can make snow falling effect on blog background by using CSS alone. 


A major advantage of this snow effect is that no Java scripts used. In case of no using java scripts your blog can't be overloaded. Snow will flow from top to bottom of your blog. But content and links on your blog is not interfering with snow falling effect. Some of special effects may interfere with contents and links of the blog. But snow falling effect works only on background of the blog. So it prevents the interference of blog contents and effect.

How The Falling Snowflakes Widget  Looks Like?


We have used four different types of snow falls effects that include, Breeze, Medium Snow, Snowflakes and Thunderstorm. It would complement those blogs which have dark colors because originally Snow is slightly white in shade. Thus, it wouldn’t appear so prominent on a site that has a white background. Check out the Following screenshot because it will clear all the doubts which are popping up in everyone’s mind. 

Why this snow effect?

  • Neat and clean snow balls
  • Changes direction according to curser location
  • Takes less time to load
  • Doesn't affect loading time
  • Snow balls stick to the taskbar 

How To Add Christmas Snow Fall Effect in Blogger

Please follow the below steps :
  • Log in to Blogger.
  • Go to Dashboard > Layout.
  • Click on "Add a Gadget".
  • Select HTML/Java Script widget.
  • Paste the following codes into the widget box : 

<script type="text/javascript">
  //Configure below to change URL path to the snow image
  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz5JUs06EZdE0fhv3dzgIo9ehr5pdnih-APl7Ol2-ypY7iUjBowcXJHIo0uFoeEcZsOwal6rpgLYfs8VWOQ_6OOgMvn7_3vrZPSgxf32wP6EhPeXX0JoMN6Cz2s-xgxrbVYbrVOuCVqlc/s400/snow.gif"
  // Configure below to change number of snow to render
  var no = 30;
  // 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://2.bp.blogspot.com/-MsCdyoGtGdA/UX5gk72qNoI/AAAAAAAAAfQ/LaKTmUG-aJM/s1600/snow+falling+effect.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>


Replace 30  to set falling snow ball numbers in your site
 Save Your Gadget and place it anywhere you want 
 That’s it, the cool snow effect will be live on your blog, do let me know if you encounter with any of the errors in setting up the snow effect on your blogger blog.

Subscribe to: Posts (Atom)