Add Fireworks or Crackers Animation Effect in Blogger with jQuery

Today, in this article we will Learn How To Add jQuery New Year Fireworks Effect In Blogger Websites. There is no rocket science behind this widget because we have used a modest Jquery functionality which creates an Animated Firework or Crackers Effect. Have you ever witness a Diwali or New Year Eve’s Fireworks? It usually consists of firecrackers of different types. Keeping that in mind, we have created a widget based on Firecrackers. Whenever, a visiter would visit your website it would display Animated Firecrackers all across your site.

Add Fireworks or Crackers Animation Effect in Blogger with jQuery

Add Fireworks or Crackers Animation Effect in Blogger with jQuery

VIEW DEMO

The steps mentioned below are extremely straight forward and would take less than 2 minutes to complete the integration. There is no need to learn anything just follow the steps as they are mentioned below.

Step 1. Go to Blogger Dashboard
Step 2. Click on Theme >> Edit HTML
Step 3. In the Theme Section, Search for the </head> tag and just above it Paste the below script.

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>

Step 4. Now, Search for the </body> tag and just above it Paste the Entire jQuery Coding. That's It.

<script type='text/javascript'>//<![CDATA[
/*Fireworks Animation Script By My Shayari Zone*/
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
/*Fireworks Animation Script By My Shayari Zone - blog.myshayarizone.com*/
//]]></script>

If jQuery is already have been added into your theme, remove below line from the above code <script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>

Optional Tricks:
If you want to show this animated Fireworks effect on your entire website then you have done it or if you want to show this effect on particular sections or pages of your website then these conditional tags will help you.

For Home Page Only

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Add jQuery Code Here
</b:if>

For Posts Page Only

<b:if cond='data:blog.pageType == "item"'>
Add jQuery Code Here
</b:if>

For Static Page Only

<b:if cond='data:blog.pageType == "static_page"'>
Add jQuery Code Here
</b:if>

For Labels Page Only

<b:if cond='data:blog.searchLabel'>
Add jQuery Code Here
</b:if>

For a Particular Page Only

<b:if cond='data:blog.url == "https://blog.myshayarizone.com"'>
Add jQuery Code Here
</b:if>

Replace https://blog.myshayarizone.com with the URL of your website page or post.

Also Check : Add Christmas Snowfall Animation Effect to Blooger with jQuery

You Done It: After editing, Save the Template by Pressing “Save Template” button and open your website or blog and see the animated Fireworks or Crackers effect immediately.

We hope this tutorial may have helped you in learning How to Add Fireworks or Crackers Animation Effect with jQuery in your blog or website. If you find any difficulty then don't be hesitate to Contact us

You can find Hindi Shayari Poetry SMS, Whatsapp DP Status, Wallpaper Image Photo for every mood or emotion - MY SHAYARI ZONE

DIETING BABA® - Buy Authentic Supplements at Low Price
Most Trusted Place for all your Health, Nutritional, Bodybuilding & Dietary Supplement Needs.

Tum Nahi Ho Yaha Par 😢 | MYSHAYARIZONE | Sad Love Song | Babul Supriyo

Watch on YouTube