Don't Miss

Add a New Year Countdown Widget to your Blog

By Zohaib Liaqat - 8 Comments
Keeping your website in line with current events is a great way to let your visitors know that you really care about them and there’s a real person behind this blog. 2015 is near and I'm sure that everyone is waiting for it eagerly. As it's new year time, so I don't think that there's any other better way to show that you're keeping your website up-to-date than adding a new year countdown widget to your blog. Recently we shared some Christmas widgets and now its time for the new year 2015. So, today we're going to share a New Year Countdown Widget for your Blogger Blog. This clock displays days, hours, minutes and ticking seconds in a simple and attractive way. 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:
Add a New Year Countdown Widget to your Blog

Add a New Year Countdown Widget to your Blogger Blog

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<link href="http://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css" />
<style type="text/css">
a.bgt-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv { background: #4E5563;color: #FFFFFF;text-shadow: 0 0 6px #2aa4cf;font-family: 'Playfair Display', serif;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}
}
</style>
<a target="_blank" class="bgt-clock-link" href='http://www.blogolect.com/2014/12/add-new-year-countdown-widget-to-your-blog.html'>
<div id="TimerDiv">
Countdown Till 2015<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, 2015 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 2015";
    }
    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>

Click Save button and you're done!

We hope this article may have helped you in adding a New Year Countdown Widget to your Blogger Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Tags:

8 comments to ''Add a New Year Countdown Widget to your Blog"

ADD COMMENT
  1. Hallo
    Thanks for the post. How can I get this for wordpress?

    ReplyDelete
  2. You body a offline business, you acquaint in your bounded newspaper, you get barter advancing into your store, and you accept acquittal at the banknote register. Actualize an online store, and...how database backup do you get customers? How do you accept payment? The abstraction is the same, but the accomplish are different.

    ReplyDelete
  3. Continuous striving to reach the level of the best cockroaches control company in Dammam and through the use of the best and best types of pesticides imported from abroad to eliminate all cockroaches kitchen and home completely as well as the side to the finest technicians in everything related to control cockroaches house in Dammam Fighting cockroaches in Dammam, where we work on the permanent training of our staff and also because of their experience to qualify them to eliminate all types of cockroaches at home.
    شركة مكافحة حشرات

    ReplyDelete