How To Create Animated Fireworks Jquery Effect in Blogger

Advertisements
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. 


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. 

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. 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

18 comments

December 26, 2012 at 3:15 AM

I Just Want To Say "Shadi Mubarak" Kya Sound Add Kya Ha :P Btw G00d Work buddy!

December 26, 2012 at 3:16 AM

Hope that don't effect page speed! :)

Editorial Team MOD
December 26, 2012 at 3:19 AM

Haha Khair Mubarak Bhai. Lakin Meri Shadi Nai Hovi Abi :P... Thanks for the compliment :D

Editorial Team MOD
December 26, 2012 at 3:19 AM

I don't think it would affect your site speed. We are not adding this script for whole YEAR. Its just for 1 day so it doesn't affect that much.

December 26, 2012 at 3:23 AM

Good Work Syed Bhai. I Will Customize It To Play To Sound Again & Again :D

Editorial Team MOD
December 26, 2012 at 3:24 AM

The Sound is just on the DEMO Site. We haven't Included it on the Script. Peace

December 26, 2012 at 3:25 AM

bhai wordpress ke lie b method batao plz :)

December 26, 2012 at 3:28 AM

Thanks For Info Bro, Have A Great Day Ahead :)

December 26, 2012 at 3:50 AM

I will try it also like Christmas!!

December 26, 2012 at 4:24 AM

Awesome, syed
it really works, you can see it on blog from today till 3 january.
I guess my readers needed something like this

you can also see it on http://insidetechtricks.blogspot.com

December 26, 2012 at 4:54 AM

Nice one Syed! and faster loading :)

December 26, 2012 at 5:13 AM

Very much Inspired from this work! Great!

Editorial Team MOD
December 26, 2012 at 11:54 PM

I Think you have lots of jQuery on your sites which is conflicting with others. Thats why nothing is working on your site. Peace

Anonymous
December 31, 2012 at 3:29 AM

wow nice effect you got there

i'll try

December 31, 2012 at 3:53 AM

I hv scheduled a post on new year for 12:00 and added it in post! smart me! :P :D

January 2, 2013 at 12:09 PM

i saw this effect on infolinks...but i'am too late :p

Editorial Team MOD
January 2, 2013 at 12:10 PM

Are you sure! They were using our Scripts :)

January 10, 2014 at 3:41 PM

very nice !

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.