New Year 2017 Countdown Widget for Blogger

Learn how to add New Year 2017 countdown widget in any blogger blog. This widget also supports Chinese New Year 2017 calendar. So, easily add countdown widget for any event in blogger blog.


So, guys we are just a few weeks away from New Year 2017. We had wished so many things at the beginning of 2016, and we now have to look back at the year and learn from our mistakes and be happy with what we got in 2016. It's time to welcome 2017 and make new wishes. So, if you are a blogger and thinking to add something interesting to your blog, then you are at the right place. Today, I will share an awesome New Year countdown widget for blogger blogs. It sounds good, right? Well, we are all aware that bloggers should stay connected to their readers because they are our property in blogging and that fact leads to the latest event! We should be participating in recent events of the world, like Christmas, Eids, Independence Day, New Year and so on. So, in this tutorial, I will share two different countdown widgets, and you can customize them to your desires because Chinese has their own New Year date, 28th of January I think. You can customize date according to Chinese New Year 2017 date. So, let's get started!

Style 1:

Style one is a simple clock which will display remaining days, hours, minutes and seconds, with live ticking seconds effect, which is excellent feature in this widget. When countdown will be completed and the new year will start, this widget will display a message saying "It's New Year's Eve! Happy New Year 2016", obviously you can change this message with your unique message according to your needs. So let's see the demo first: 
As you can see in live demo/preview, this is a simple and clean multipurpose widget for blogger blogs. To add this beautiful widget in your blog, follow these four simple 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:
<link href="http://fonts.googleapis.com/css?family=Metamorphous" rel="stylesheet" type="text/css" />
<style type="text/css">
a.bgt-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv { background: transparent;color: #000;text-shadow: 0 0 6px #00cc00;font-family: 'Metamorphous', cursive;font-size: 28px;text-align: center;line-height: normal; }
.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;}
@-moz-keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
@-webkit-keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
@keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
#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;}
</style>
<a target="_blank" class="bgt-clock-link" href='http://bloggerblogging.com'>
<div id="TimerDiv">
Countdown Till 2017<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>
</a>
<script type="text/JavaScript">
function startTimer() {
    var newyr=new Date("January 1, 2017 00:00:00");
    var newyeartime=newyr.getTime();
    var todaytm=new Date();
    var todaytime=todaytm.getTime();
    var timeleft=newyeartime-todaytime;
    var leftdays = timeleft/86400000;
    var lefthr=23-todaytm.getHours();
    var leftmin=59-todaytm.getMinutes();
    var leftsec=59-todaytm.getSeconds();
    if (Math.floor(leftdays) <= -1) {
        document.getElementById('TimerDiv').innerHTML="It's New Years Eve!<br/>Happy New Year 2017";
    }
    else {
        document.getElementById('bgt-clock-days').innerHTML= Math.floor(leftdays);
        document.getElementById('bgt-clock-hr').innerHTML= lefthr;
        document.getElementById('bgt-clock-mins').innerHTML= leftmin;
        document.getElementById('bgt-clock-secs').innerHTML= leftsec;
    }
    t=setTimeout('startTimer()',999);
}
startTimer();
</script>
Customization:

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

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

Style 2:

This style is superb; I loved it. This widget shows stars, an excellent 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 Year's Eve! Happy New Year 2016'.  Let's have a look at the live demo:

So here is the code for this awesome countdown widget, just copy the code and paste it in HTML/JavaScript gadget as shown in Step 3 above:
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<style type="text/css">
a.BloggerSpice { text-decoration: none; display: block; outline: none; }
#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; }
.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;}
@-moz-keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
@-webkit-keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
@keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
</style>
<a target="_blank" class="Blogger Blogging" href='http://bloggerblogging.com'>
<div id="NotonBochor">
New Year Counting Till 2017<br/>
<tr>
<td>
<img style="float:left;padding-left:10%;" src="http://1.bp.blogspot.com/-LDzHdwn0ucc/VKDoO96LOoI/AAAAAAAAIxE/9OR7y6SHgp0/s1600/BloggerSpice%2BSmileyDogCelebrating.gif" width="125px"/>
</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>
</a>
<script type="text/JavaScript">
function startTimer() {
    var newyr=new Date("January 1, 2017 00:00:00");
    var newyeartime=newyr.getTime();
    var todaytm=new Date();
    var todaytime=todaytm.getTime();
    var timeleft=newyeartime-todaytime;
    var leftdays = timeleft/86400000;
    var lefthr=23-todaytm.getHours();
    var leftmin=59-todaytm.getMinutes();
    var leftsec=59-todaytm.getSeconds();
    if (Math.floor(leftdays) <= -1) {
        document.getElementById('NotonBochor').innerHTML="It's New Years Eve!<br/>Happy New Year 2017";
    }
    else {
        document.getElementById('NewYear-clock-days').innerHTML= Math.floor(leftdays);
        document.getElementById('NewYear-clock-hr').innerHTML= lefthr;
        document.getElementById('NewYear-clock-mins').innerHTML= leftmin;
        document.getElementById('NewYear-clock-secs').innerHTML= leftsec;
    }
    t=setTimeout('startTimer()',999);
}
startTimer();
</script>
Customization:

  • Customize the colored text at your desire, as mentioned above.
Hit save, and you are done.
That's how easy it is to add beautiful New Year countdown widget in any blogger blog.
Happy blogging and stay tuned with BloggerBlogging.com
And yeah Advance Happy New Year from Sumair Hisbani.

COMMENTS

COPmo - Best Responsive Blogger Template!
Name

Blogger Basics,1,Blogger Templates,1,Blogger Tutorials,5,Blogger Widgets,4,Make Money,2,Social Media Tricks,1,Top List,1,
ltr
item
Blogger Blogging: New Year 2017 Countdown Widget for Blogger
New Year 2017 Countdown Widget for Blogger
Learn how to add New Year 2017 countdown widget in any blogger blog. This widget also supports Chinese New Year 2017 calendar. So, easily add countdown widget for any event in blogger blog.
https://3.bp.blogspot.com/-Rbs9h2fdA3E/WFBsM86ASLI/AAAAAAAAEHw/vKk4MUcDCJo7PUwd1h5Q523ExcegiEs2ACLcB/s1600/New%2BYear%2BCountdown%2BWidget%2Bfor%2BBlogger.jpg
https://3.bp.blogspot.com/-Rbs9h2fdA3E/WFBsM86ASLI/AAAAAAAAEHw/vKk4MUcDCJo7PUwd1h5Q523ExcegiEs2ACLcB/s72-c/New%2BYear%2BCountdown%2BWidget%2Bfor%2BBlogger.jpg
Blogger Blogging
http://www.bloggerblogging.com/2016/12/new-year-countdown-widget-for-blogger.html
http://www.bloggerblogging.com/
http://www.bloggerblogging.com/
http://www.bloggerblogging.com/2016/12/new-year-countdown-widget-for-blogger.html
true
3810560244605616045
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