Add a New Year Countdown Widget to your Blogger Blog

Learn How To Add a New Year Countdown Widget to your Blogger Blog with simple steps. And 100% working codes and live demo. Add this awesome widget to impress your blogger blog readers.

How to Add FeedJit Live Traffic Feed Widget in Blogger?

How to install DISQUS Comment System in Blogger Blog?

Simple Recent Posts Widget for Blogger

We are just 2 days away from New Year 2016 and every one is warmed up and charged to welcome the new year in their lives and make this event memorable. As a blogger, its always essential to stay up-to-date with events going around and show your skills to your blog readers. As its a new year event so today I am going to share a new year countdown widget for your blogger blog. After sharing a great Christmas Effect and New Year Fireworks Effect, now its time for a countdown widget. There are two different styled countdown widgets which I will share in this post, so choose wisely. Both are awesome styles, one is simple clock which displays remaining days, hours, minutes and ticking seconds, the other styled clock also displays the same with stars falling down effect. The moment when the new year starts, this widget will display a message saying "It's New Years Eve! "Happy New Year 2015". So lets begin this tutorial:

Style 1:

Style one is simple clock which will display remaining days, hours, minutes and seconds, with live ticking seconds effect, which is awesome feature in this widget. When countdown will be completed and new year will start, this widget will display a message saying "It's New Years Eve! Happy New Year 2016", obviously you can change this message with your unique message according to your needs. So lets see the demo first: 

Live Demo

As you can see in the demo, its a good new year countdown widget for your blogger blog. In order to add this awesome widget just follow the steps:

Step 1: Login to your Blogger Account >> Select a Blog

Step 2: Go to Layout >> Add a Gadget and Select HTML/JavaScript gadget.

Step 3: Copy the code below and add in the box:

2. <link href="http://fonts.googleapis.com/css?family=Metamorphous" rel="stylesheet" type="text/css" />
3. <style type="text/css">
4. a.bgt-clock-link { text-decoration: none; display: block; outline: none; }
5. #TimerDiv { background: transparent;color: #000;text-shadow: 0 0 6px #00cc00;font-family: 'Metamorphous', cursive;font-size: 28px;text-align: center;line-height: normal; }
6. .bgt-clock-sep { -moz-animation: sep-blinks 1.1s linear 0s infinite; -webkit-animation: sep-blinks 1.1s linear 0s infinite; animation: sep-blinks 1.1s linear 0s infinite;}
7. @-moz-keyframes sep-blinks
8. {
9. 0% {opacity:1}
10. 50% {opacity:0}
11. 100% {opacity:1}
12. }
13. @-webkit-keyframes sep-blinks
14. {
15. 0% {opacity:1}
16. 50% {opacity:0}
17. 100% {opacity:1}
18. }
19. @keyframes sep-blinks
20. {
21. 0% {opacity:1}
22. 50% {opacity:0}
23. 100% {opacity:1}
24. }
25. #bgt-clock-days{color:#00cc00;font-weight:900;}#bgt-clock-hr,#bgt-clock-mins,#bgt-clock-secs{font-family:courier new}#bgt-clock-hr{background:#00cc00;font-weight:700}#bgt-clock-secs{background:#ccc;color:#2aa4cf;}#bgt-clock-mins{background:#2aa4cf;}
26. </style>
27. <a target="_blank" class="bgt-clock-link" href='http://trickzbucket.blogspot.com'>
28. <div id="TimerDiv">
29. Countdown Till 2016<br /><span id="bgt-clock-days"></span> Days<br /><span id="bgt-clock-hr"></span><span class="bgt-clock-sep"> : </span><span id="bgt-clock-mins"></span><span class="bgt-clock-sep"> : </span><span id="bgt-clock-secs"></span></div>
30. </a>
31. <script type="text/JavaScript">
32. function startTimer() {
33. 
    
34.     var newyr=new Date("January 1, 2015 00:00:00");
35.     var newyeartime=newyr.getTime();
36.     var todaytm=new Date();
37.     var todaytime=todaytm.getTime();
38.     var timeleft=newyeartime-todaytime;
39.     var leftdays = timeleft/86400000;
40.     var lefthr=23-todaytm.getHours();
41.     var leftmin=59-todaytm.getMinutes();
42.     var leftsec=59-todaytm.getSeconds();
43.     if (Math.floor(leftdays) <= -1) {
44.         document.getElementById('TimerDiv').innerHTML="It's New Years Eve!<br/>Happy New Year 2016";
45.     }
46.     else {
47.         document.getElementById('bgt-clock-days').innerHTML= Math.floor(leftdays);
48.         document.getElementById('bgt-clock-hr').innerHTML= lefthr;
49.         document.getElementById('bgt-clock-mins').innerHTML= leftmin;
50.         document.getElementById('bgt-clock-secs').innerHTML= leftsec;
51.     }
52.     t=setTimeout('startTimer()',999);
53. }
54. startTimer();
55. </script>

Customization:

• The Read Color: Event of the countdown.
• The Yellow Color: Date of event.
• The Brown Color: Message alert after countdown.

Step 4: Click on Save Button and you are done!.

Style 2:

This style is awesome, I love it. It shows stars, an awesome gif image and also counts remaining days, hours, minutes and seconds with ticking effect. This code was shared by  a blog called 'Blogger Spice'. This awesome new year countdown widget will display a message saying 'It's New Years Eve! Happy New Year 2016'.  Lets have a look on live demo:

Live Demo

So here is the code for it, just copy the code and paste it in HTML/JavaScript gadget as shown in Step 3 above:

3.  <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
4. <style type="text/css">
5. a.BloggerSpice { text-decoration: none; display: block; outline: none; }
6. #NotonBochor { width:99%;background: #FEFEFE;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB1Q5dktQmfU7ZEqKwp2T2Uqmga9-xlv_8VsyKk6NjJv7hZAxvK9yuC432znDMixgRRT_50Clk8P_YvkR09ejjI_R8gvP7TdcYoYknHO-tf42Wvd_XUJwrpMfutMjBTKXP2BcL-bPFCIA5/s1600/BloggerSpice+StarsPattern.gif);color: #000000;text-shadow: 0 0 3px #FB0825;font-family: 'Oswald', serif;font-size: 26px;text-align: center;line-height: normal; }
7. .NewYear-clock-sep { -moz-animation: sep-blinks 1.1s linear 0s infinite; -webkit-animation: sep-blinks 1.1s linear 0s infinite; animation: sep-blinks 1.1s linear 0s infinite;}
8. @-moz-keyframes sep-blinks 
9. {
10. 0% {opacity:1}
11. 50% {opacity:0}
12. 100% {opacity:1} 
13. }
14. @-webkit-keyframes sep-blinks 
15. {
16. 0% {opacity:1}
17. 50% {opacity:0}
18. 100% {opacity:1} 
19. }
20. @keyframes sep-blinks 
21. {
22. 0% {opacity:1}
23. 50% {opacity:0}
24. 100% {opacity:1} 
25. }
26. </style>
27. <a target="_blank" class="TrickzBucket" href='http://trickzbucket.blogspot.com'>
28. <div id="NotonBochor">
29. New Year Counting Till 2016<br/>
30. <tr> 
31. <td> 
32. <img style="float:left;padding-left:10%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPK0UNSYSqfpNRp4xhbWIHMg55mXyiTwRIpPKPv6zUfYF4x96XS5iGjCemAn7Chsmw27dN2T4ZeUfKf5tgmDw8itfGITYep4Un8F4UcY8YebdIPBajzZcCYyGjhVZwZkVbSlJYknt-lbg/s1600/BloggerSpice+SmileyDogCelebrating.gif" width="125px"/> 
33. </td></tr><span id="NewYear-clock-days"></span> Days To Go<br /><span id="NewYear-clock-hr"></span><span class="NewYear-clock-sep"> : </span><span id="NewYear-clock-mins"></span><span class="NewYear-clock-sep"> : </span><span id="NewYear-clock-secs"></span></div>
34. </a>
35. <script type="text/JavaScript">
36. function startTimer() {
37.     var newyr=new Date("January 1, 2016 00:00:00");
38.     var newyeartime=newyr.getTime();
39.     var todaytm=new Date();
40.     var todaytime=todaytm.getTime();
41.     var timeleft=newyeartime-todaytime;
42.     var leftdays = timeleft/86400000;
43.     var lefthr=23-todaytm.getHours();
44.     var leftmin=59-todaytm.getMinutes();
45.     var leftsec=59-todaytm.getSeconds();
46.     if (Math.floor(leftdays) <= -1) {
47.         document.getElementById('NotonBochor').innerHTML="It's New Years Eve!<br/>Happy New Year 2016";
48.     }
49.     else {
50.         document.getElementById('NewYear-clock-days').innerHTML= Math.floor(leftdays);
51.         document.getElementById('NewYear-clock-hr').innerHTML= lefthr;
52.         document.getElementById('NewYear-clock-mins').innerHTML= leftmin;
53.         document.getElementById('NewYear-clock-secs').innerHTML= leftsec;
54.     }
55.     t=setTimeout('startTimer()',999);
56. }
57. startTimer();
58. </script>

• Customize the colored text with your desire.

Hit Save and you are done! Enjoy Blogging and Happy New Year from TrickzBucket.