New Year Countdown Widget v2 for Blogger
Yesterday we shared an article on How to Add a New Year Countdown Widget to your Blog. The countdown widget design we shared yesterday was a simple and clean design. After some customizations, we turned that simple design to a colorful design. If your blog is about Images, Wallpapers, or Music then this design will definitely fit into your blog. 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. So, today we're going to share New Year Countdown Widget v2 for Blogger.
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
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=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://www.blogolect.com/2014/12/new-year-countdown-widget-v2-for-blogger.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