How to Add Fireworks Effect on Blogger!

Blogger or website owners are always want to decorate their site on special occasion. Actually decorating site on special occasion can make your site more attractive. And as I always say that an attractive site can attract more visitors. That is why I have decided to share tricks to decorate site on special occasion. And my first decoration trick is related to recent Diwali festival. Actually you can add this effect on your blog on every special occasion.

In this post I am gonna show how to add fireworks effect on Blogger Blog. As a result of this effect a beautiful fireworks will start on your site. While reading this I this you have already noticed fireworks happening on your screen. If your are blogging on Blogger platform then by going through this post you will able to add fireworks effect on your blog. You just need to add a simple code on your site. Lets see the procedure.

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.


Adding Fireworks Effect on Blogger:

• First Sign into your Blogger Account and go to Dashboard.
• Then click on Template option and click on Edit HTML button. You will land on your blog's HTML page.
• Here in the HTML page find </body> and Paste the below code just Above that.



 <script type="text/javascript">  
 //<![CDATA[  
 function write_fire(e){var t,n,r;stars[e+"r"]=createDiv("|",12);  
 boddie.appendChild(stars[e+"r"]);  
 for(t=bits*e;t<bits+bits*e;t++){  
 stars[t]=createDiv("*",13);boddie.appendChild(stars[t])}}  
 function createDiv(e,t){var n=document.createElement("div");  
 n.style.font=t+"px monospace";n.style.position="absolute";  
 n.style.backgroundColor="transparent";  
 n.appendChild(document.createTextNode(e));  
 return n}function launch(e){  
 colour[e]=Math.floor(Math.random()*colours.length);  
 Xpos[e+"r"]=swide*.5;  
 Ypos[e+"r"]=shigh-5;bangheight[e]=Math.round((.5+Math.random())*shigh*.4);dX[e+"r"]=(Math.random()-.5)*swide/bangheight[e];  
 if(dX[e+"r"]>1.25)stars[e+"r"].firstChild.nodeValue="/";  
 else if(dX[e+"r"]<-1.25)stars[e+"r"].firstChild.nodeValue="\\";  
 else stars[e+"r"].firstChild.nodeValue="|";  
 stars[e+"r"].style.color=colours[colour[e]]}function bang(e){var t,n,r=0;  
 for(t=bits*e;t<bits+bits*e;t++){n=stars[t].style;n.left=Xpos[t]+"px";n.top=Ypos[t]+"px";  
 if(decay[t])decay[t]--;  
 else r++;if(decay[t]==15)n.fontSize="7px";else if(decay[t]==7)n.fontSize="2px";  
 else if(decay[t]==1)n.visibility="hidden";Xpos[t]+=dX[t];Ypos[t]+=dY[t]+=1.25/intensity[e]}  
 if(r!=bits)setTimeout("bang("+e+")",speed)}function stepthrough(e){var t,n,r;var i=Xpos[e+"r"];  
 var s=Ypos[e+"r"];Xpos[e+"r"]+=dX[e+"r"];Ypos[e+"r"]-=4;if(Ypos[e+"r"]<bangheight[e]){n=Math.floor(Math.random()*3*colours.length);  
 intensity[e]=5+Math.random()*4;for(t=e*bits;t<bits+bits*e;t++){Xpos[t]=Xpos[e+"r"];Ypos[t]=Ypos[e+"r"];dY[t]=(Math.random()-.5)*intensity[e];dX[t]=(Math.random()-.5)*(intensity[e]-Math.abs(dY[t]))*1.25;  
 decay[t]=16+Math.floor(Math.random()*16);r=stars[t];  
 if(n<colours.length)r.style.color=colours[t%2?colour[e]:n];  
 else if(n<2*colours.length)r.style.color=colours[colour[e]];  
 else r.style.color=colours[t%colours.length];r.style.fontSize="13px";r.style.visibility="visible"}bang(e);launch(e)}  
 stars[e+"r"].style.left=i+"px";stars[e+"r"].style.top=s+"px"}  
 function set_width(){var e=999999;var t=999999;  
 if(document.documentElement&&document.documentElement.clientWidth)  
 {  
 if(document.documentElement.clientWidth>0)e=document.documentElement.clientWidth;  
 if(document.documentElement.clientHeight>0)t=document.documentElement.clientHeight}  
 if(typeof self.innerWidth!="undefined"&&self.innerWidth){  
 if(self.innerWidth>0&&self.innerWidth<e)e=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<t)t=self.innerHeight}  
 if(document.body.clientWidth){  
 if(document.body.clientWidth>0&&document.body.clientWidth<e)e=document.body.clientWidth;  
 if(document.body.clientHeight>0&&document.body.clientHeight<t)t=document.body.clientHeight}  
 if(e==999999||t==999999){e=800;t=600}swide=e;shigh=t}var bits=80;var speed=33;var bangs=5;var colours=new Array("#03f","#f03","#0e0","#93f","#0cf","#f93","#f0c");  
 var bangheight=new Array;var intensity=new Array;var colour=new Array;var Xpos=new Array;  
 var Ypos=new Array;var dX=new Array;var dY=new Array;  
 var stars=new Array;var decay=new Array;var swide=800;var shigh=600;var boddie;window.onload=function(){  
 if(document.getElementById){var e;boddie=document.createElement("div");boddie.style.position="fixed";  
 boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";  
 boddie.style.width="1px";boddie.style.height="1px";  
 boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width();  
 for(e=0;e<bangs;e++){write_fire(e);launch(e);setInterval("stepthrough("+e+")",speed)}}};window.onresize=set_width//]]>  
 </script>  



• Finally click on Save Template button to apply it.

That's it. Now view your blog and you will see fireworks happening on your blog. I hope it will help you to decorate your site on special occasion.

Stay with www.iTTimesbd.com for more IT related post