Hi friends,Today i came up with new blogger tricks, its a awesome fireworks decoration for 2015 new year using JavaScript.It can be add it to your blog easily.This scripts works for every modern browsers. if you are interesting with it
check below link before add it to your blogger. Hope this helps to decorate your personal blog,blogger tricks blog in this new year 2015.
Awesome Lights Effect Widget for Blogger
Awesome Lights Effect 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 before it
<script type="text/javascript">Hint: If you want change fireworks colors. you have to change red color code with new color codes.
// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");
// blue red green purple cyan orange pink
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;
if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
addRVLoadEvent(light_blue_touchpaper);
function light_blue_touchpaper() { if (document.getElementById) {
var i;
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 (i=0; i<bangs; i++) {
write_fire(i);
launch(i);
setInterval('stepthrough('+i+')', speed);
}
}}
function write_fire(N) {
var i, rlef, rdow;
stars[N+'r']=createDiv('|', 12);
boddie.appendChild(stars[N+'r']);
for (i=bits*N; i<bits+bits*N; i++) {
stars[i]=createDiv('*', 13);
boddie.appendChild(stars[i]);
}
}
function createDiv(char, size) {
var div=document.createElement("div");
div.style.font=size+"px monospace";
div.style.position="absolute";
div.style.backgroundColor="transparent";
div.appendChild(document.createTextNode(char));
return (div);
}
function launch(N) {
colour[N]=Math.floor(Math.random()*colours.length);
Xpos[N+"r"]=swide*0.5;
Ypos[N+"r"]=shigh-5;
bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
else stars[N+"r"].firstChild.nodeValue="|";
stars[N+"r"].style.color=colours[colour[N]];
}
function bang(N) {
var i, Z, A=0;
for (i=bits*N; i<bits+bits*N; i++) {
Z=stars[i].style;
Z.left=Xpos[i]+"px";
Z.top=Ypos[i]+"px";
if (decay[i]) decay[i]--;
else A++;
if (decay[i]==15) Z.fontSize="7px";
else if (decay[i]==7) Z.fontSize="2px";
else if (decay[i]==1) Z.visibility="hidden";
if (decay[i]>1 && Math.random()<.1) {
Z.visibility="hidden";
setTimeout('stars['+i+'].style.visibility="visible"', speed-1);
}
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity[N]);
}
if (A!=bits) setTimeout("bang("+N+")", speed);
}
function stepthrough(N) {
var i, M, Z;
var oldx=Xpos[N+"r"];
var oldy=Ypos[N+"r"];
Xpos[N+"r"]+=dX[N+"r"];
Ypos[N+"r"]-=4;
if (Ypos[N+"r"]<bangheight[N]) {
M=Math.floor(Math.random()*3*colours.length);
intensity[N]=5+Math.random()*4;
for (i=N*bits; i<bits+bits*N; i++) {
Xpos[i]=Xpos[N+"r"];
Ypos[i]=Ypos[N+"r"];
dY[i]=(Math.random()-0.5)*intensity[N];
dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
decay[i]=16+Math.floor(Math.random()*16);
Z=stars[i];
if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
else if (M<2*colours.length) Z.style.color=colours[colour[N]];
else Z.style.color=colours[i%colours.length];
Z.style.fontSize="13px";
Z.style.visibility="visible";
}
bang(N);
launch(N);
}
stars[N+"r"].style.left=oldx+"px";
stars[N+"r"].style.top=oldy+"px";
}
window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
// ]]>
</script><a href="http://www.bloggertrix.com/"></a>
4. Now save your Template.
You are done. If you have any problem related with this new blogger tricks , New Year Fireworks Decoration for Blogger. Just leave a comment or message .I will help to you.
Thanks bro.nice widget
ReplyDeleteYou are welcome bro :)
DeleteWhat line number is the body?
ReplyDeleteLove this widget.
I cant tell exact line because, every templates are different,
DeleteYou will get close body tag, end of your template code.
Ok...thanks.
ReplyDeleteI will have to look again. I didn't see the EXACT body part.
So do I copy that entire page you have?
Its just tag, if you need help contact me.
Deletethanks for this <3 how do i decrease the number of fireworks to make it less laggy?
ReplyDeleteChange this value
Deletevar bangs=5;
Thanks bro
ReplyDeleteNice Sharing......
ReplyDeletenice sharing :)
ReplyDeleteHello, this is a good blog post, Thanks
ReplyDeleteThanks you.
ReplyDeletehi dear h r u . nice tips thanks for sharing.
ReplyDeletewww.infoustaad.com
www.bloggingseotips.com
www.tipsustaad.com
Ohh Great Post..
ReplyDeleteThanks you..
DeleteNice. I am late, but will try.
ReplyDeleteThanks For Your Quality Post. You Are Great man. I salute You ;)
ReplyDeletePlease Visit My Blog:
<a href="http://nischalcreations.blogspot.com>Free Blogging Tips And Tricks</a>
Dear Sir,
ReplyDeleteThanks For Article , your Article Is very nice For My Business. Our Studio Offering best Service Is Architectural Scale Model. I Will Use your Idea .
Thanks .
Wow nice. Cool (y)
ReplyDeletePutuberbagi
Ok...thanks.
ReplyDeleteI will have to look again.Beauty Tips For Face
I didn't see the EXACT body part.
So do I copy that entire page you have?
You can get exact body code in your template ( code line 3070)
DeleteThank you for it.
ReplyDelete