How to Add a Birth Day / New Year Countdown Widget to Blog

Keeping your web site in line with current events could be a good way to let your guests recognize that you simply very care concerning them and there’s a true person who wrote it this blog. Your birthday or New Year is close to and I am positive that everybody is watching for it thirstily. As it's your important event, thus I do not suppose that there is the other higher thanks to show that you are keeping your web site up-to-date than adding a birthday / New Year count widget to your blog. So, nowadays we're progressing to share a birthday / New Year count down widget for your blogger blog. This clock displays days, hours, minutes and ticking seconds in a simple and attractive way. The moment when the birthday / New Year starts, this widget will display a message saying "Happy Birthday to You !" or "It's New Years Eve! Happy New Year 2016". So, lets begin:

1-  Log in to Blogger account  >>  Select Blog
2-  Select Layout  >>  Click Add a Gadget  >>  Select HTML/JavaScript
3-  Now copy the below code and paste it into 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.sharetoworld.com/2015/03/how-to-add-birth-day-new-year-countdown.html'>

<div id="TimerDiv">

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>

</a>

<script type="text/JavaScript">

function startTimer() {

    var newyr=new Date("January 1, 2016 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 Year’s Eve!<br/>Happy New Year 2016";

    }

    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>

Note:

• The Red Color : The event of the countdown.
• The Blue Color : The event date.
• The Green Color : The message alert after countdown to 0.

4-  Click Save button and You're done!