Add Advanced Snowfall Effect and santa clause image to Blogger blog 2016

Add Christmas precipitation result to your Blogger blogs with nice snowflakes customizations in colours, appearance, number, and speed.

I've seen bloggers sometimes beautify their blogs for Christmas because the month of December arrives. the foremost fashionable Christmas result you see on websites and blogs is that the precipitation result, within which the snowflakes fall slowly and this whole result floats over the journal.

So, however cool can or not it's to feature such Effect to our Blogger web logs? This tutorial covers a way to add falling snowflakes to a Blogger blog with no secret writing skills needed.

How to Add Christmas Lights Widget for Blogger

The effect is straightforward, however supports advanced customization settings that will assist you to bring it to subsequent level. Below are some features our Snowfall effect will carry:

• Easy to install, hardly takes 5 minutes to get it up and running on your blog
• You may easily customize the snowflakes size, shape, speed, number, color, and appearance
• You may easily remove the effect if you wish when Christmas ends, just by removing the lines of code you've added
• You don't need to host the script files separately, I've already done it for you

DEMO

Steps

I want to keep it as simple as possible, but I'm also sharing some information on what resources are we going to use, and how to customize the effect. We will be using jQuery and Snowfall jQuery plugin to bring about the effect.

You need not to worry about anything, just follow the below given steps and you will see the falling snowflakes in action on your blog.

• Edit HTML of your Blogger template and look for </body> (the closing body tag). See this guide if you don't know how to edit the template.
• Paste the following code just above </body>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script><script src='http://code.jquery.com/jquery-migrate-1.2.1.js' type='text/javascript'</script><script type='text/javascript'>//<![CDATA[(function(b){b.snowfall=function(a,d){function s(c,f,g,h,j){this.id=j;this.x=c;this.y=f;this.size=g;this.speed=h;this.step=0;this.stepSize=e(1,10)/100;if(d.collection)this.target=m[e(0,m.length-1)];c=b(document.createElement("div")).attr({"class":"snowfall-flakes",id:"flake-"+this.id}).css({width:this.size,height:this.size,background:d.flakeColor,position:"absolute",top:this.y,left:this.x,fontSize:0,zIndex:d.flakeIndex});b(a).get(0).tagName===b(document).get(0).tagName?(b("body").append(c),a=b("body")):b(a).append(c);this.element=document.getElementById("flake-"+this.id);this.update=function(){this.y+=this.speed;this.y>n-(this.size+6)&&this.reset();this.element.style.top=this.y+"px";this.element.style.left=this.x+"px";this.step+=this.stepSize;this.x+=Math.cos(this.step);if(d.collection&&this.x>this.target.x&&this.x<this.target.width+this.target.x&&this.y>this.target.y&&this.y<this.target.height+this.target.y){var b=this.target.element.getContext("2d"),c=this.x-this.target.x,a=this.y-this.target.y,e=this.target.colData;if(e[parseInt(c)][parseInt(a+this.speed+this.size)]!==void 0||a+this.speed+this.size>this.target.height)if(a+this.speed+this.size>this.target.height){for(;a+this.speed+this.size>this.target.height&&this.speed>0;)this.speed*=0.5;b.fillStyle="#fff";e[parseInt(c)][parseInt(a+this.speed+this.size)]==void 0?(e[parseInt(c)][parseInt(a+this.speed+this.size)]=1,b.fillRect(c,a+this.speed+this.size,this.size,this.size)):(e[parseInt(c)][parseInt(a+this.speed)]=1,b.fillRect(c,a+this.speed,this.size,this.size));this.reset()}else this.speed=1,this.stepSize=0,parseInt(c)+1<this.target.width&&e[parseInt(c)+1][parseInt(a)+1]==void 0?this.x++:parseInt(c)-1>0&&e[parseInt(c)-1][parseInt(a)+1]==void 0?this.x--:(b.fillStyle="#fff",b.fillRect(c,a,this.size,this.size),e[parseInt(c)][parseInt(a)]=1,this.reset())}(this.x>l-i||this.x<i)&&this.reset()};this.reset=function(){this.y=0;this.x=e(i,l-i);this.stepSize=e(1,10)/100;this.size=e(d.minSize*100,d.maxSize*100)/100;this.speed=e(d.minSpeed,d.maxSpeed)}}function p(){for(c=0;c<j.length;c+=1)j[c].update();q=setTimeout(function(){p()},30)}var d=b.extend({flakeCount:35,flakeColor:"#ffffff",flakeIndex:999999,minSize:1,maxSize:2,minSpeed:1,maxSpeed:5,round:false,shadow:false,collection:false,collectionHeight:40},d),e=function(b,a){return Math.round(b+Math.random()*(a-b))};b(a).data("snowfall",this);var j=[],f=0,c=0,n=b(a).height(),l=b(a).width(),i=0,q=0;if(d.collection!==false)if(f=document.createElement("canvas"),f.getContext&&f.getContext("2d"))for(var m=[],f=b(d.collection),k=d.collectionHeight,c=0;c<f.length;c++){var g=f[c].getBoundingClientRect(),h=document.createElement("canvas"),r=[];if(g.top-k>0){document.body.appendChild(h);h.style.position="absolute";h.height=k;h.width=g.width;h.style.left=g.left;h.style.top=g.top-k;for(var o=0;o<g.width/d.minSize;o+=d.minSize)r[o]=[];m.push({element:h,x:g.left,y:g.top-k,width:g.width,height:k,colData:r})}}else d.collection=false;b(a).get(0).tagName===b(document).get(0).tagName&&(i=25);b(window).bind("resize",function(){n=b(a).height();l=b(a).width()});for(c=0;c<d.flakeCount;c+=1)f=j.length,j.push(new s(e(i,l-i),e(0,n),e(d.minSize*100,d.maxSize*100)/100,e(d.minSpeed,d.maxSpeed),f));d.round&&b(".snowfall-flakes").css({"-moz-border-radius":d.maxSize,"-webkit-border-radius":d.maxSize,"border-radius":d.maxSize});d.shadow&&b(".snowfall-flakes").css({"-moz-box-shadow":"1px 1px 1px #555","-webkit-box-shadow":"1px 1px 1px #555","box-shadow":"1px 1px 1px #555"});p();this.clear=function(){b(a).children(".snowfall-flakes").remove();j=[];clearTimeout(q)}};b.fn.snowfall=function(a){if(typeof a=="object"||a==void 0)return this.each(function(){new b.snowfall(this,a)});else if(typeof a=="string")return this.each(function(){var a=b(this).data("snowfall");a&&a.clear()})}})(jQuery);//]]></script><script type='text/javascript'>//<![CDATA[jQuery(document).ready(function(){    jQuery(document).snowfall({        flakeCount : 800,        flakeColor : "#ffffff",        flakeIndex: 999999,        minSize : 1,        maxSize : 4,        minSpeed : 2,        maxSpeed : 8,        round : true,        shadow : false,    });});//]]></script><style>.otman {position:absolute;top:0;right:0;}#otposition {position:relative;}</style><div id="otposition"><a href="http://official-tricks.blogspot.com/2014/12/christmaseffect14.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgscguOgD3kcZhd4kB5MaD5DAkjMfN8myqQeJ1zhlHLP2qnaAP8KZW8ocZ2N1iz9W7HkX3NxkpcWoLZ4XSILqy2X9qD6mNKPqPbi-LXaSzRYQqNtuMdzeNGAkVzF6l1zAwewzFEB0hMOd0/s1600/santa-claus-1128051203.png" class="otman"/></a>

• Finally save changes

Advanced Customization guide

As I told you in the beginning, you can customize the effect to make it as you wish. You just have to add a few parameters in the highlighted line in above code.

Note that parameter name and value should be separated with a colon (:) and the value should have a comma (,) in the end. Below give are the supported parameters:

flakeCount: any positive integer value eg. 100
flakeColor: a color value under quotes eg. "white" or #ffffff
m inSize, maxSize, minSpeed, and maxSpeed: any positive integer value
round: Boolean value i.e. true or false. It makes the snowflakes appear rounded.
shadow: Boolean value i.e. true or false. It gives the snowflakes a drop-shadow.

Hope you enjoyed the post. Feel free to post your views, suggestions, and questions in comments, and consider sharing it with friends. Merry Christmas :)