Decorate Blogger Blog’s Layout By Using Christmas Goodies
There are many cool ideas available for you to greet your blog’s readers but one of the best thing you can do it to decorate your blog with Christmas goodies, snow effects, bells etc. that i am going share it with you which can take few minutes only to be installed on your blog. Here i will share an awesome Blogger Widget for specially for Christmas.
Well you can check out the live demo for the effect I am talking about, you will see snow falling and other stuff. So if you like the effect you can follow below steps on how you can add it to your blogger blog.
Contents
How To Add Christmas Goodies to Blogger?
- Go to Blogger > Template > Edit HTML.
- Press Ctrl + F and search for <body> tag & paste below code after it.
<script type=’text/javascript’>
//<![CDATA[
document.write(‘<style type=”text/css”>body{background:#f5465a;padding-bottom:150px}</style><img style=”position:fixed;z-index:9999;top:0;left:0″ src=”https://lh6.googleusercontent.com/-c8CoUvCourw/UMcWWTeBE-I/AAAAAAAABcU/q-j9X7733zw/s150/top-left.png”/><img style=”position:fixed;z-index:9999;top:0;right:0″ src=”https://lh5.googleusercontent.com/-JABklf9ModU/UMcWWzSSJ4I/AAAAAAAABcY/g4sZMhrgjXU/s150/top-right.png”/><div style=”position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://lh6.googleusercontent.com/-kph53UsoxM4/UMczVhTsCVI/AAAAAAAABcs/DVTyvtz7blc/s1600/footer.png) repeat-x bottom left;”></div><img style=”position:fixed;z-index:9999;bottom:30px;left:30px” src=”https://lh4.googleusercontent.com/-mEgGUg-ou4k/UMcz0qy2NhI/AAAAAAAABc0/gF1uW4iE6y0/s180/bottom-left.png”/>’);var no=100;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();for(i=0;i<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){document.write(‘<div id=”dot’+i+'” style=”POSITION:absolute;Z-INDEX:’+i+’;VISIBILITY:visible;TOP:15px;LEFT:15px;”><span style=”font-size:18px;color:#fff”>*</span></div>’)}}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<no;++i){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>
- Now just save your template and you are ready to see this awesome effect on your blog, now enjoy and greet your readers with this awesome effect.
So now this effect covers pretty much everything all those snow effect, some nice stable snow at the bottom of your screen that slides as you scroll down, it even adds two trees effect that looks pretty nice at the top. But still if you wanna add effects on singular basis then check below list.
Add Snow Effect To Blogger Blog
- Open Blogger > Template > Edit HTML.
- Press Ctrl + F & search for </head> tag & paste below code above it.
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js’/>
<script type=’text/javascript’>//<![CDATA[
(function($){$.fn.snow=function(options){var $flake=$(‘<div id=”flake” />’).css({‘position’:’absolute’,’top’:’-50px’}).html(‘❄’),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:”#FFFFFF”},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo(‘body’).css({left:startPositionLeft,opacity:startOpacity,’font-size’:sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,’linear’,function(){$(this).remove()});},options.newOn);};})(jQuery);//]]></script><script>$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: ‘#ffffff’ });
});</script>
- Now you can remove the red line in above code if you already have jQuery installed in your blog, well if the effect does not work without above line then do include this line maybe few elements could be missing.
- That’s it now just press Save Template and you are done.
Add Flashing Christmas Lights Widget To Blogger Blog
- Open Blogger > Layout > Add Gadget.
- Now just scroll down & choose HTML/JavaScript Gadget.
- Now just add below code into it.
<script language=javascript type=text/javascript>//<![CDATA[
function COT(e,t,n,r){document.write(‘<div id=”cot_tl_fixed”>’);document.write(“<><img src=”+e+’ alt=”” border=”0″></a>’);document.write(“</div>”)}var Ovr2=””;if(typeof document.compatMode!=”undefined”&&document.compatMode!=”BackCompat”){cot_t1_DOCtp=”_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth – offsetWidth);}”}else{cot_t1_DOCtp=”_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth – offsetWidth);}”}if(typeof document.compatMode!=”undefined”&&document.compatMode!=”BackCompat”){cot_t1_DOCtp2=”_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}”}else{cot_t1_DOCtp2=”_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}”}var cot_tl_bodyCSS=”* html {background: fixed;background-repeat: repeat;background-position: left top;}”;var cot_tl_fixedCSS=”#cot_tl_fixed{position:fixed;”;var cot_tl_fixedCSS=cot_tl_fixedCSS+”_position:absolute;”;var cot_tl_fixedCSS=cot_tl_fixedCSS+”top:0px;”;var cot_tl_fixedCSS=cot_tl_fixedCSS+”left:0px;”;var cot_tl_fixedCSS=cot_tl_fixedCSS+”clip:rect(0 100 85 0);”;var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;var cot_tl_popCSS=”#cot_tl_pop {background-color: transparent;”;var cot_tl_popCSS=cot_tl_popCSS+”position:fixed;”;var cot_tl_popCSS=cot_tl_popCSS+”_position:absolute;”;var cot_tl_popCSS=cot_tl_popCSS+”height:98px;”;var cot_tl_popCSS=cot_tl_popCSS+”width: 1920px;”;var cot_tl_popCSS=cot_tl_popCSS+”right: 120px;”;var cot_tl_popCSS=cot_tl_popCSS+”top: 20px;”;var cot_tl_popCSS=cot_tl_popCSS+”overflow: hidden;”;var cot_tl_popCSS=cot_tl_popCSS+”visibility: hidden;”;var cot_tl_popCSS=cot_tl_popCSS+”z-index: 99999;”;var cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;document.write(‘<style type=”text/css”>’+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+”</style>”);COT(“http://i.imgur.com/1sVQJsi.gif”,”SC2″,”none”)//]]></script>
- That’s it now press Save Widget option and you are done. Now just refresh your blog and enjoy these awesome flashing lights fixed to your blog’s top header.
Conclusion:
Thank you! Stay Blessed!