Wednesday, October 31, 2012

Get Falling Snow Effect on Blogger for Christmas

Christmas is coming and as you all know Christmas is the occasion of snow, peace and ultimate cool fun so if you want to dress up your blog with some snow effect we are here with the code which you can apply to your blog to get that awesome snow effect really easily. It will enhance your overall visitors experience by giving them a cold effect while they browse your website. So you can check the below screenshot on how snow will look on your website.
snow falling effect blogger

1. Go to Blogger.com > Template > Edit HTML > Proceed.
2. Now press Ctrl + F and search for </body> tag and paste the below script right above it.
<a href='http://www.techedian.blogspot.in'><img alt='Snow-Effect' src='http://i.imgur.com/BiTiG.png'/></a>
<script type='text/javascript'>//<![CDATA[
if(document.getElementById&&window.addEventListener||window.attachEvent){(function(){function t(){var a,b,c,d,e,f;if(q){if(o.documentElement&&o.defaultView&&typeof o.defaultView.scrollMaxY=="number"){a=o.document
Element.offsetHeight;b=o.defaultView.scrollMaxY;c=o.documentElement.offsetWidth;d=o.defaultView.scrollMaxX;e=a-b;f=c-d}else{e=n.innerHeight;f=n.innerWidth}l=e-2;m=f-2}else{l=n.clientHeight-2;m=n.clientWidth-2}}function u(a){var b,c;if(r){b=n.pageYOffset;c=n.pageXOffset}else{b=n.scrollTop;c=n.scrollLeft}return a==0?b:c}function v(){var c,n;for(i=0;i<a;i++){c=f[i];n=f[i]*Math.cos(k[i]);d[i]+=c;e[i]+=n;if(e[i]>=m||d[i]>=l){d[i]=-10;e[i]=Math.round(Math.random()*m);f[i]=h[i]==1?Math.round(2+Math.random()*2):Math.round(3+Math.random()*2);j[i]=h[i]==1?.05+Math.random()*.1:.05+Math.random()*.05}g[i].top=d[i]+u(0)+p;g[i].left=e[i]+u(1)+p;k[i]+=j[i]}setTimeout(v,b)}function w(){t();for(i=0;i<a;i++){g[i]=document.getElementById("flake"+(s+i)).style;d[i]=Math.round(Math.random()*l);e[i]=Math.round(Math.random()*m)}v()}var a=30;var b=30;var c=1;var d=[];var e=[];var f=[];var g=[];var h=[];var j=[];var k=[];var l,m,n;var o=document;var p="px";var q=typeof window.innerWidth=="number";var r=typeof window.pageYOffset=="number";var s=o.getElementsByTagName("div").length;if(o.documentElement.style&&typeof o.documentElement.style.MozOpacity=="string")a=12;for(i=0;i<a;i++){h[i]=Math.round(1+Math.random()*1);document.write('<div id="flake'+(s+i)+'" style="position:absolute;top:0px;left:0px;width:'+h[i]+"px;height:"+h[i]+"px;background-color:#ffffff;font-size:"+h[i]+'px"></div>');k[i]=0;f[i]=h[i]==1?Math.round(2+Math.random()*2):Math.round(3+Math.random()*2);j[i]=h[i]==1?.05+Math.random()*.1:.05+Math.random()*.05}if(q)n=window;else{if(o.documentElement&&typeof o.documentElement.clientWidth=="number"&&o.documentElement.clientWidth!=0)n=o.documentElement;else{if(o.body&&typeof o.body.clientWidth=="number")n=o.body}}if(window.addEventListener){window.addEventListener("resize",t,false);window.addEventListener("load",w,false)}else if(window.attachEvent){window.attachEvent("onresize",t);window.attachEvent("onload",w)}})()}
//]]></script>
3. Now save the template and you are done, now just refresh your blog and check that code is working properly or not. You will small snow fall effect falling randomly :)

No comments:

Post a Comment

 

Pages

About Me

Bookmark & Share