Dec 6, 2015

Decorate Blogger Blog's Layout By Using Christmas Goodies

data:blog.title
Christmas is on the way, and we started planning for a night bash on that day. rejoicing with out friends lighting some candles and confessing to GOD Jesus. but how we can forget, that we have our own god blog. People will come on our blog on that day, then we should respect by entertaining them with customize our blog's layout containing some falling snow, bells and whistles. We should even greet them with some nice Christmas status updates well that depends on you but I have something special for that day that will make your blogger blog awesome.

Christmas Goodies, Decorate Blogger Blog

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.
Demo
 

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

As we know guys 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.
  • 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('&#10052;'),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

christmas flashing lights, decorate blogger blog

Wanna decorate your blog a little bit more, well we have a perfect lighting option that will add a nice effect right in your blogger blog. Well add these amazing flashing lights effect to your blogger blog and make it glow.
  • 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:

So above are Christmas Goodies  For Decorating Blogger Blog's Layout and we hope you will like this post. Just use one of above goodies and wish your Blog readers merry Christmas. We hope by this complete guide you can easily add these widgets in your blogger blog. If anyhow problem persist then drop a comment below. We will help you out of sure. Now it's your turn to give us feedback by using comment box and share on social media. Do Share and Subscribe Us.
Thank you! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.