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.


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: 



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:



  1. <link href="http://fonts.googleapis.com/css?family=Metamorphous" rel="stylesheet" type="text/css" />
  2. <style type="text/css">
  3. a.bgt-clock-link { text-decoration: none; display: block; outline: none; }
  4. #TimerDiv { background: transparent;color: #000;text-shadow: 0 0 6px #00cc00;font-family: 'Metamorphous', cursive;font-size: 28px;text-align: center;line-height: normal; }
  5. .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;}
  6. @-moz-keyframes sep-blinks
  7. {
  8. 0% {opacity:1}
  9. 50% {opacity:0}
  10. 100% {opacity:1}
  11. }
  12. @-webkit-keyframes sep-blinks
  13. {
  14. 0% {opacity:1}
  15. 50% {opacity:0}
  16. 100% {opacity:1}
  17. }
  18. @keyframes sep-blinks
  19. {
  20. 0% {opacity:1}
  21. 50% {opacity:0}
  22. 100% {opacity:1}
  23. }
  24. #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;}
  25. </style>
  26. <a target="_blank" class="bgt-clock-link" href='http://trickzbucket.blogspot.com'>
  27. <div id="TimerDiv">
  28. 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>
  29. </a>
  30. <script type="text/JavaScript">
  31. function startTimer() {

  32.     var newyr=new Date("January 1, 2015 00:00:00");
  33.     var newyeartime=newyr.getTime();
  34.     var todaytm=new Date();
  35.     var todaytime=todaytm.getTime();
  36.     var timeleft=newyeartime-todaytime;
  37.     var leftdays = timeleft/86400000;
  38.     var lefthr=23-todaytm.getHours();
  39.     var leftmin=59-todaytm.getMinutes();
  40.     var leftsec=59-todaytm.getSeconds();
  41.     if (Math.floor(leftdays) <= -1) {
  42.         document.getElementById('TimerDiv').innerHTML="It's New Years Eve!<br/>Happy New Year 2016";
  43.     }
  44.     else {
  45.         document.getElementById('bgt-clock-days').innerHTML= Math.floor(leftdays);
  46.         document.getElementById('bgt-clock-hr').innerHTML= lefthr;
  47.         document.getElementById('bgt-clock-mins').innerHTML= leftmin;
  48.         document.getElementById('bgt-clock-secs').innerHTML= leftsec;
  49.     }
  50.     t=setTimeout('startTimer()',999);
  51. }
  52. startTimer();
  53. </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:



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



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


  • Customize the colored text with your desire.

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




like us facebook

COMMENTS

Name

Blogger Templates,5,Blogger Tips,31,Blogger Widgets,9,Computer Tricks,3,Downloads,30,WordPress Tricks,5,
ltr
item
Trickz Bucket: Add a New Year Countdown Widget to your Blogger Blog
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.
http://4.bp.blogspot.com/-g3DwyXqz9zs/VoJ9E9Bt_PI/AAAAAAAADNI/kIlAkVgX2tk/s640/Add%2Ba%2BNew%2BYear%2BCountdown%2BWidget%2Bto%2Byour%2BBlogger%2BBlog.png
http://4.bp.blogspot.com/-g3DwyXqz9zs/VoJ9E9Bt_PI/AAAAAAAADNI/kIlAkVgX2tk/s72-c/Add%2Ba%2BNew%2BYear%2BCountdown%2BWidget%2Bto%2Byour%2BBlogger%2BBlog.png
Trickz Bucket
http://www.trickzbucket.com/2015/12/add-new-year-countdown-widget-to-your-blogger-blog.html
http://www.trickzbucket.com/
http://www.trickzbucket.com/
http://www.trickzbucket.com/2015/12/add-new-year-countdown-widget-to-your-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