expr:class='"loading" + data:blog.mobileClass'>

Saturday 26 December 2015

how to add effect on your blog

Christmas is just few days away and we are warming up for a night bash on that day, rejoicing with out friends lighting some candles and confessing to GOD Jesus, well are we forgetting something we own god dam blog and people will be coming to out blog on that day so we should treat them as a guest and show them some respect by entertaining them with a whole customized layout of your blogger blog 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.

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.

  1. Go to Blogger > Template > Edit HTML.
  2. 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCyESzQ9ZCTjABK1Zdtys46Mt5g0MMDmA8oJv8O7AI86_K7x-FLf-dnNOZRsGC-RbUuCaQxzC2Td-FdsONTQPnlT8YwbI5Zu7POIaosvvWrEObmJdY0uXIBqjkLOd5zu_xPS67DSkHKk/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirjrF2PMs9lCqsyYHlZfbcpLDR1REu4Pu7MsVQKMkfxSPSCCcHHiGEEeWayNeN-T8ClxjTz1WHBlTdYelrFyQ5wWNse_z7Vip4bco_ge6scbXMAOXCmumkJhp9LsKqTBJPn0XuYfFKEow/s150/top-right.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjD4VwINxkjx4HzJcw9Lp2Vi-SimFdUScZsslgrsPipdJg3JD1s5gpaFDrpiS8go4PYV-xh1b91Fb7jwD4xfzp7F35pOb8hx5vpuCAu2SewzGuiPmbn9lTrKSL0sGoZjUJwnDt4oh1osQ/s1600/footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJ151i53dmOBcAH7IWKb_GuZWzXuWimjWk8M3ga5psGUjGdtiTsOPxsPeap2tUzOfdhThSRyRlniC6OomT4M15Zp6zRjK2eHrgDDzzVcrZxsBWP8x6Rch_8cqz4m6GW1CWaF2huWwIJ4/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>
  3. 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.

# Adding Falling Snow Effect in Blogger

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.
  1. Open Blogger > Template > Edit HTML.
  2. 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>
  3. 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.
  4. That's it now just press Save Template and you are done, adding some nice snowfall effect to your blogger blog.
Well here you go guys, today I have briefly explained how you can easily add some nice snowfall effect in your blogger blog, well if you think the effect looks awesome then do like and share this post.

# Adding Flashing Christmas Lights in Blogger

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.
flashing christmas lights
  1. Open Blogger > Layout > Add Gadget.
  2. Now just scroll down & choose HTML/JavaScript Gadget.
  3. 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>
  4. That's it now press Save Gadget option and you are done.
Now just refresh your blog and enjoy these awesome flashing lights fixed to your blog's top header. Well now this ends our post for awesome Christmas goodies that you can add to your blogger blog, well if you have few more gadget that you wanna share with everyone then do comment with a link to that post.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)