Add Christmas Snow Falling Effect With Snowman for Blogger
How you friends? Hope you all doing great. Christmas seasons is coming,For this 2014 season you can decorate your blog with snow falling effect.So this post will help you to add Snow falling effect for your blog. last Christmas season, i posted about how to add light decoration for your blog. if you are interesting with it check below link. Both are included with demo. Hope this help.
Awesome Christmas Lights Widget for Blogger
Awesome Christmas Lights Widget for Blogger
How to Add Christmas Lights Widget for Blogger
1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find <body> and add below code just after it
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>Hint: If you want, you can change above red value as your like.
<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>.btriman {position:absolute;top:0;right:0;}#btrixposition {position:relative;}</style>
<div id="btrixposition"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIf-UthjjT0Tt6UgpiryGuQWyAUaiYmoBEC3ppu37Qj53TiMRG8rWGksXYo_iTTO4eKybxvlbJ7JaDiwRFOAjg8MmjbAmrE7KH5940m3Umg90O8WRSFLQLy3wZn-PAYUsHPUYsdI4E7096/s1600/Bloggertrixman.png" class="btriman"/><a href="http://www.bloggertrix.com/"></a></div>
4. Now save your Template.
You are done. If you have any problem related to this Christmas Lights Widget for Blogger. Just leave a comment or message .I will help to you.
Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter
0 Response to "Add Christmas Snow Falling Effect With Snowman for Blogger"
Posting Komentar