Christmas Snow Falling Effect For Blogger Blogs

Christmas Snow Falling Effect For Blogger Blogs | http://tipsandtricksfor.blogspot.com/2011/12/christmas-snow-falling-effect-for.html

In this post we have a very cool effect you can use to Spice Up Your Blog over the Christmas.With just a small piece of code you have Snow Flakes gently falling down your blog.The Snow Fall effect we use is simple and wont disrupt the readers.Before you add the Snow to your blog you can check out the demo.

Live Demo - Click To See The Demo : Snow Fall Demo

Update - This effect will work on all custom or older templates but unfortunately not with templates from the Blogger Template Designer.If you using a template designer template or if you want some more cool Christmas effects we have just published 10 Spectacular Falling Christmas Objects For Blogger including a Falling animated Snowflake, snowman, Santa and Christmas Three check it out.

Update 2. - Click to see how to get the snow effect with differant colors.

Add Snow Fall Effect To Your Blog

Adding the effect is easy and can be done in a few quick steps:

Step 1. In your dashboard Click Design > Add A Gadget > Choose Html/Javascript








Step 2. Copy And Paste The Code Below Into The Html/Javascript Gadget :


<script type="text/javascript">
//<![CDATA[
  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuptDLcdtiZO5DZFj98Ib4oOqVbBjknXekzrWfa2qkMmicGYnQqNiR_4Vi_RW5rtX3jz9MyrN0mW0fvxmyAmPtHVUMbqapL-NEXoJYVqZRUNP3OvUfnbgpwqxPj-nR3gJLgR00R6Rnmk/s400/snow.gif"
  var no = 15;
  var hidesnowtime = 0;
  var snowdistance = "pageheight";
  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;  
  var am, stx, sty;
  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/AVvXsEiAuptDLcdtiZO5DZFj98Ib4oOqVbBjknXekzrWfa2qkMmicGYnQqNiR_4Vi_RW5rtX3jz9MyrN0mW0fvxmyAmPtHVUMbqapL-NEXoJYVqZRUNP3OvUfnbgpwqxPj-nR3gJLgR00R6Rnmk/s400/snow.gif" : snowsrc
  for (i = 0; i &lt; no; ++ i) {
    dx[i] = 0;                    
    xp[i] = Math.random()*(doc_width-50);
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;    
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
if (ie4up||ns6up) {
      if (i == 0) {
        document.write("&lt;div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"&gt;&lt;a href=\"http://dynamicdrive.com\"&gt;&lt;img src='"+snowsrc+"' border=\"0\"&gt;&lt;\/a&gt;&lt;\/div&gt;");
      } else {
        document.write("&lt;div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"&gt;&lt;img src='"+snowsrc+"' border=\"0\"&gt;&lt;\/div&gt;");
      }
    }
  }

  function snowIE_NS6() {
    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 &lt; no; ++ i) {
      yp[i] += sty[i];
      if (yp[i] &gt; 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&lt;no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
    snowIE_NS6();
if (hidesnowtime&gt;0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

//]]>
</script>

(You don't need to give the gadget a title just leave title area blank)

or coppy from this http://tinypaste.com/3e8cb82f

Step 3. Save The Gadget and check out your cool snow Effect.

Loading Related Posts