New Year Fireworks for Blogs and Websites

Everyone is eagerly waiting for the new year (2013) 2014 and everyone is celebrating it in their own different way.
You can also celebrate this new year in a different way by putting some amazing firework effects on your blog or website. This tutorial will teach you how to do it, the code we will provide can be used on any website.

See what you will get
Preview the Effect

The Code

The complete effect is created with JavaScript and all you need to do is copy-paste a JavaScript function in the <head> of your website. This is the JS file that contains the code :
[Thanks to for the script ]

The code is very long so I didn't put it into this post. The code is quite long but don't worry it won't make your site slow, many people thinks including too many JS functions can slow down the page but no it's not true.  

Using the code

This JavaScript can be used just by putting it in the head of the HTML of the page and the fireworks effect.

For Websites (everyone)

There are two ways to apply the effect on your website, one is to put the script directly on your website's main index file and other is to use the script externally with a .js file.
Script in <head>
Go to this link, copy the entire script and paste it between a <script> tag. Like this
<script type='text/javascript>
//Paste the Script here

Now open your main file or web page and paste it above </head>.
External File
Sometimes internal JavaScript can cause error in the document. And it's always better to use large scripts externally. Use the following code :
<script type='text/javascript' src=''></script>
Put this HTML above ending head tag of your website. Or if you want to customize the JS and use it then download the file from the link in the src and re-upload it on your own host, then just replace the URL in src with your own. That's it.

When you load your website, you will see some beautiful fireworks on your webpage.

For Blogger Users

Instructions above can also be used for Blogger. But as Blogger users are not normally tech savvy, we will write the instructions briefly.
Script in head
Go to this link, select and copy the whole code from that JS file. Same here, you can to put the the copied code between a <script> tag. 
<script type='text/javascript'>
//Paste the copied code here
Go to your Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F to find </head> in your template. When you find it, just paste the code (with <script> tag) above </head> and save the template.
Use External File
I suggest to your external file for script in Blogger to prevent any errors. This is the code you need
<script type='text/javascript' src=''></script>
Instruction is the same as above, Edit HTML and paste the code above </head> and save the template.

Hide the effect on Post Pages

The fireworks are okay on pages other than post. Some people might get disturbed by the fireworks while reading. So if you don't want the fireworks on your post pages then just put your complete code (along with <script> tag) between this Blogger Conditional tag :
<b:if cond='data:blog.pageType != "item"'> 
//Paste your final code here with <script>
Now just put it above </head> in your template and work done !

Any Suggestion ?

If you have any suggestion regarding this post, you can post it in comment. And also comment if you liked this fireworks effect. 

Thanks for reading and a very very Happy New Year !