How To Create Animated Fireworks Jquery Effect in Blogger

New Year’s Eve is just 5 days plus nights away and the whole blogger community is anxiously waiting for that day. On New Year’s Eve, we celebrate with joy and try to learn from our mistakes that we have made previously. Similarly, On New Year’s Eve, many Bloggers would love to decorate their site with Fireworks. Keeping that in mind, we have designed a new awe-inspiring Fireworks widget, which would literally produce Spark in the eyes of your visitors. The Firework effect is not an ordinary one because we have used Flexible jQuery that works quite brilliantly. Today, in this article we will Learn How To Add jQuery New Year Fireworks Effect In Blogger Enabled Websites. 

Animated Fireworks Effect (DEMO)

How The jQuery Fireworks Widget Looks Like?

There is no rocket science behind this widget because we have used a modest Jquery functionality which creates an Animated Firework Effect. Have you ever witness a 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 visit would visit your website it would display Animated Firecrackers all across your site. Consider the following screenshot to clear your concept. 

How To Add New Year Fireworks Effect in Blogger?

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

Go To Blogger.com >> Template >> Edit HTML >> Proceed.

In the Template, search for the ]]></b:skin> Tag and just above it paste the Following CSS Coding. Please, don’t try to modify or customize the CSS otherwise it may not give the desire results which we are expecting.

#mblfireworks{
            display: block;     
            width: 1000px;
            height: 735px;
            float: center;
            color:#6F6F6F;
            text-align: center;
            font-size: 12px;
        }
        #mblfireworks a {
            color:#6F6F6F;
        }

Once Again in the template Search For the </body> tag and just below it Paste the Entire Jquery Coding. If anyone is unable to find the </body> tag in their template then, he can Paste the Following coding just below your Footer coding.

<div id="mblfireworks">  </div>

<script src="https://mybloggerlab.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="https://mybloggerlab.googlecode.com/files/fireworks.js" type="text/javascript"></script>

<script>
/*Fire Works By MyBloggerLab.com*/  
jQuery(function($){              
Xteam.fireworkShow('#mblfireworks', 100);                
});  
</script>

All Done: After customizing, Save the Template by Pressing “Save Template” button. Feel Free to leave your suggestions and comments if there is a room for improvement. 

• How To Add Christmas Snow Fall Effect in Blogger Blogs

From The Editor's Desk:

We hope this widget will help everyone to decorate their site with Fireworks on this New year's Eve. Wishing you a Happy New year 2013 in advance. Hopefully, we will be there to wish you on the New year's Night too. What are your thoughts about this jQuery Effect? Take a lot care till then peace, Blessings and happy fire cracking.