Add Jquery Fireworks Animation Effect in Blogger

Now a days Fireworks are used for showing happiness or celebrating any event. On New Year Eve hundreds of cities are decorated with fireworks. Today we made an amazing widget for blogger on Jquery Animated Fireworks. It runs smoothly because we have used flexible jquery script. Today, in this Post you will come to know How To Add jQuery Animated Fireworks Effect In Blogger Blogs.

How Fireworks Widget Looks?

There is great logic behind this gadget because we have used a modest Jquery functionality which creates an Animated Firework Effect. Have you ever seen a New Year Eve’s Fireworks? It usually consists of different types of firecrackers. Keeping that in mind, we have created a gadget based on Firecrackers. Whenever, a visit would visit your website it would display Animated Firecrackers all across your site. See below given screen shot to get a concept about it.

How To Add Fireworks Widget in Blogger?

STEP-1: Go to Blogger Dashboard.
STEP-2: Click on Template.
STEP-3: Click on Edit HTML button.
STEP-4: In the Template, search for the ]]></b:skin> tag.
STEP-5: And just above it Paste the Following CSS Coding.

(Note: Please, don’t try to modify or customize the CSS otherwise it may not give the desire results which we are expecting.)

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

STEP-6: Again in the template Search For the </body> tag.
STEP-7: And just below it Paste the Entire below given Jquery Coding.
(Note: 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="bbtfireworks">  </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>
jQuery(function($){            
Xteam.fireworkShow('#bbtfireworks', 100);              
});
</script>

STEP-8: After doing above steps, Save your Template by Pressing “Save Template” button.

Congratulations: 

You have successfully added beautiful and amazing Jquery Fireworks Animation Effect Widget in Blogger. if you are still feeling any query, feel free to comment below! Your comments are always welcomed.

Allah Hafiz till next post!