Blogger

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!

0 comments:

Post a Comment

Powered by Blogger.