How to Add 2016 New Year Fireworks Decoration in Blogger Blog

Learn How to Add New Year Fireworks Decoration Effect in Blogger Blog. An awesome effect for google's blogger blog to impress your visitors with unique effect at this new year event.


New Year is just few days away and everyone is warmed up for the event. Everyone is setting their goals for 2016 and looking back to 2015 to learn from the mistakes and to gather the positives for memories. This year was not ideal for me, I went through lots of stress. But positive of the year was I founded this blog. There are so many mistakes which took place in my life in this entire year but I'm looking forward to overcome those mistakes. 2015 is the first year of my blogging life. Speaking about blogging, what new thing you can do for your visitors during the new year celebrations? In this post, I will share a simple trick with you to decorate your blog with 'Fireworks'. Yes, you can do that. So, first of lets look at the demo first so that you have an idea about how fireworks decoration will look on your blog?!



As you can see in the demo, its awesome effect for your blog to impress and surprise your visitors. So, lets learn how you can add this fireworks effect to your blogger blog?


How to Add New Year Fireworks Effect in blogger?


Follow these simple steps to add this beautiful new year fireworks effect to your blogger blog:

Step 1: Go to Blogger Dashboard >> Template.

Step 2: Click on Edit HTML button.

Step 3: Search (CLTL-F) for </body> tag.

Setp 4: Copy the below code and paste it above/before </body> tag.


  1. <script type="text/javascript">

  2. // <![CDATA[

  3. var bits=80; // how many bits

  4. var speed=33; // how fast - smaller is faster

  5. var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)

  6. var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c"); 

  7. //                     blue    red     green   purple  cyan    orange  pink



  8. var bangheight=new Array();

  9. var intensity=new Array();

  10. var colour=new Array();

  11. var Xpos=new Array();

  12. var Ypos=new Array();

  13. var dX=new Array();

  14. var dY=new Array();

  15. var stars=new Array();

  16. var decay=new Array();

  17. var swide=800;

  18. var shigh=600;

  19. var boddie;



  20. if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {

  21.   var oldonload=window.onload;

  22.   if (typeof(oldonload)!='function') window.onload=funky;

  23.   else window.onload=function() {

  24.     if (oldonload) oldonload();

  25.     funky();

  26.   }

  27. }



  28. addRVLoadEvent(light_blue_touchpaper);



  29. function light_blue_touchpaper() { if (document.getElementById) {

  30.   var i;

  31.   boddie=document.createElement("div");

  32.   boddie.style.position="fixed";

  33.   boddie.style.top="0px";

  34.   boddie.style.left="0px";

  35.   boddie.style.overflow="visible";

  36.   boddie.style.width="1px";

  37.   boddie.style.height="1px";

  38.   boddie.style.backgroundColor="transparent";

  39.   document.body.appendChild(boddie);

  40.   set_width();

  41.   for (i=0; i<bangs; i++) {

  42.     write_fire(i);

  43.     launch(i);

  44.     setInterval('stepthrough('+i+')', speed);

  45.   }

  46. }}

  47. function write_fire(N) {

  48.   var i, rlef, rdow;

  49.   stars[N+'r']=createDiv('|', 12);

  50.   boddie.appendChild(stars[N+'r']);

  51.   for (i=bits*N; i<bits+bits*N; i++) {

  52.     stars[i]=createDiv('*', 13);

  53.     boddie.appendChild(stars[i]);

  54.   }

  55. }

  56. function createDiv(char, size) {

  57.   var div=document.createElement("div");

  58.   div.style.font=size+"px monospace";

  59.   div.style.position="absolute";

  60.   div.style.backgroundColor="transparent";

  61.   div.appendChild(document.createTextNode(char));

  62.   return (div);

  63. }

  64. function launch(N) {

  65.   colour[N]=Math.floor(Math.random()*colours.length);

  66.   Xpos[N+"r"]=swide*0.5;

  67.   Ypos[N+"r"]=shigh-5;

  68.   bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);

  69.   dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];

  70.   if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";

  71.   else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";

  72.   else stars[N+"r"].firstChild.nodeValue="|";

  73.   stars[N+"r"].style.color=colours[colour[N]];

  74. }

  75. function bang(N) {

  76.   var i, Z, A=0;

  77.   for (i=bits*N; i<bits+bits*N; i++) { 

  78.     Z=stars[i].style;

  79.     Z.left=Xpos[i]+"px";

  80.     Z.top=Ypos[i]+"px";

  81.     if (decay[i]) decay[i]--;

  82.     else A++;

  83.     if (decay[i]==15) Z.fontSize="7px";

  84.     else if (decay[i]==7) Z.fontSize="2px";

  85.     else if (decay[i]==1) Z.visibility="hidden";

  86.     if (decay[i]>1 && Math.random()<.1) {

  87.        Z.visibility="hidden";

  88.        setTimeout('stars['+i+'].style.visibility="visible"', speed-1);

  89.     }

  90.     Xpos[i]+=dX[i];

  91.     Ypos[i]+=(dY[i]+=1.25/intensity[N]);



  92.   }

  93.   if (A!=bits) setTimeout("bang("+N+")", speed);

  94. }

  95. function stepthrough(N) { 

  96.   var i, M, Z;

  97.   var oldx=Xpos[N+"r"];

  98.   var oldy=Ypos[N+"r"];

  99.   Xpos[N+"r"]+=dX[N+"r"];

  100.   Ypos[N+"r"]-=4;

  101.   if (Ypos[N+"r"]<bangheight[N]) {

  102.     M=Math.floor(Math.random()*3*colours.length);

  103.     intensity[N]=5+Math.random()*4;

  104.     for (i=N*bits; i<bits+bits*N; i++) {

  105.       Xpos[i]=Xpos[N+"r"];

  106.       Ypos[i]=Ypos[N+"r"];

  107.       dY[i]=(Math.random()-0.5)*intensity[N];

  108.       dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;

  109.       decay[i]=16+Math.floor(Math.random()*16);

  110.       Z=stars[i];

  111.       if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];

  112.       else if (M<2*colours.length) Z.style.color=colours[colour[N]];

  113.       else Z.style.color=colours[i%colours.length];

  114.       Z.style.fontSize="13px";

  115.       Z.style.visibility="visible";

  116.     }

  117.     bang(N);

  118.     launch(N);

  119.   }

  120.   stars[N+"r"].style.left=oldx+"px";

  121.   stars[N+"r"].style.top=oldy+"px";


  122. window.onresize=set_width;

  123. function set_width() {

  124.   var sw_min=999999;

  125.   var sh_min=999999;

  126.   if (document.documentElement && document.documentElement.clientWidth) {

  127.     if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;

  128.     if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;

  129.   }

  130.   if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {

  131.     if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;

  132.     if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;

  133.   }

  134.   if (document.body.clientWidth) {

  135.     if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;

  136.     if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;

  137.   }

  138.   if (sw_min==999999 || sh_min==999999) {

  139.     sw_min=800;

  140.     sh_min=600;

  141.   }

  142.   swide=sw_min;

  143.   shigh=sh_min;

  144. }

  145. // ]]>

  146. </script><noscript><a href="http://trickzbucket.blogspot.com/2015/12/how-to-add-new-year-fireworks-decoration--in-blogger-blog.html">New Year Fireworks Effect</a></noscript>


Step 4: Just save template and you are done.


Final words:


This is the great effect for new year and Christmas. Its always important in blogging to interact with your visitors and keeping that in mind these small things can make you look different from others. You can use this code in your page or post as well. If you want to see how it will look on your blog, use above code in page and it will work perfect on that page only. And if you are posting about new year or related topics you can use this effect on your posts too. Just paste this code in HTML section. If you want to customize the colors of the effect just replace highlighted color codes with yours. Please share your experience with us in comments below. You can also join us on Facebook. See you until next post. Happy Blogging and advance Happy New Year.



like us facebook

COMMENTS

Speed up your social site in 15 minutes, Free website transfer and script installation
Name

Blogger Templates,5,Blogger Tips,31,Blogger Widgets,9,Computer Tricks,3,Downloads,30,WordPress Tricks,5,
ltr
item
Trickz Bucket: How to Add 2016 New Year Fireworks Decoration in Blogger Blog
How to Add 2016 New Year Fireworks Decoration in Blogger Blog
Learn How to Add New Year Fireworks Decoration Effect in Blogger Blog. An awesome effect for google's blogger blog to impress your visitors with unique effect at this new year event.
http://4.bp.blogspot.com/-_pi6Zf62MxY/VoABMuViK1I/AAAAAAAADLo/EFqFr_Rwmr4/s640/New%2BYear%2BFireworks%2Beffect%2Bto%2BBlogger%2BBlog%2Bby%2BTrickz%2BBucket.jpeg
http://4.bp.blogspot.com/-_pi6Zf62MxY/VoABMuViK1I/AAAAAAAADLo/EFqFr_Rwmr4/s72-c/New%2BYear%2BFireworks%2Beffect%2Bto%2BBlogger%2BBlog%2Bby%2BTrickz%2BBucket.jpeg
Trickz Bucket
https://trickzbucket.blogspot.com/2015/12/how-to-add-new-year-fireworks-decoration-in-blogger-blog.html
https://trickzbucket.blogspot.com/
https://trickzbucket.blogspot.com/
https://trickzbucket.blogspot.com/2015/12/how-to-add-new-year-fireworks-decoration-in-blogger-blog.html
true
6195765242120428356
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy