New Year Countdown Widget for Website/Blog

First of all i would like to wishes happy happy new year 2014. 2013 is going to be our life and everyone is
looking forward to the new year, this is a very happy moment. i have brought a cool new year counddown widget for your blog or website. this widget show a clock that will end on New Year's 2014, and click show your personal new year message after 31, December 2013. you can easily add into your website or blog.

This Code conten two parts first HTML and Java script and other CSS Code, you can add first code with the part2 theme code what you like.
Demo: New Year Countdown widget

Help: How to Add into Blogger?

Part 1 , HTML, Java Script

<a target="_blank" class="bloggerknown-clock-link" href='http://www.bloggerknown.com/2013/12/new-year-countdown-widget.html'>
<div id="TimerDiv">
New Year's Eve Countdown<br />
<span id="bloggerknown-clock-days">
</span> Days<br /><span id="bloggerknown-clock-hr">
</span><span class="bloggerknown-clock-sep"> : </span>
<span id="bloggerknown-clock-mins"></span>
<span class="bloggerknown-clock-sep"> : </span>
<span id="bloggerknown-clock-secs"></span></div>
</a>
<script type="text/JavaScript">
function startTimer() {
    /**  New Year 2014 Countdown Timer
Author: Muhammad Azeem
     url: http://www.bloggerknown.com **/
    var newyr=new Date("January 1, 2014 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 Time, Friends!<br/>Happy New Year 2014";
    }
    else {
        document.getElementById('bloggerknown-clock-days').innerHTML= Math.floor(leftdays);
        document.getElementById('bloggerknown-clock-hr').innerHTML= lefthr;
        document.getElementById('bloggerknown-clock-mins').innerHTML= leftmin;
        document.getElementById('bloggerknown-clock-secs').innerHTML= leftsec;
    }
t=setTimeout('startTimer()',999);
}
startTimer();
</script>

Customizing code: This JavaScript is almost simple. Only few things you have to understand to modify this.

• var newyr Creating new date instance of January 01, 2014
• var newyeartime store time in milliseconds since January 1, 1970 to January 01, 2014
• var todaytm creating new instance of local time
• var timeleft store time in millisecond, difference of current time and January 01, 2014
• var leftdays calculate and store days left using timeleft variable.
• Math.floor() convert floating value in integer (lowest integer )
• if (Math.floor(leftdays) <= -1) check if leftdays value reaches below 0 i.e -1
• setTimeout('startTimer()',500) call function after every 0.5 second to update time.

If you want to change timer then change the target date that is var newyr=new Date("January 1, 2014 00:00:00"); then the timer will we changed according to the target date.

Part 2 , CSS Themes Code

1.

Theme 1

<style type="text/css">
@font-face {font-family: 'Rye';font-style: normal;font-weight: 400;src: local('Rye Regular'), local('Rye-Regular'), url(http://themes.googleusercontent.com/static/fonts/rye/v1/o1b_1mvE63vyDpMCbEPL_A.woff) format('woff');}
a.bloggerknown-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv {padding: 5px; background: #207C09;color: #FFFFFF;font-family: 'Rye', cursive;font-size: 25px;text-align: center;text-shadow: 0 0 5px #96FFE8;line-height: normal; }
.bloggerknown-clock-sep { -moz-animation: sep-blinks 1s linear 0s infinite; -webkit-animation: sep-blinks 1s linear 0s infinite; animation: sep-blinks 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> 

2.  

Theme 2

<style type="text/css">
a.bloggerknown-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv {padding: 5px;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrc0wyqHzS4ohOW4EUSlSuEDGTFjWnvuDfh5d-tHKFt_5W65MmE0v5wPIhyphenhyphenS2dcNtsSRxvQBu2ZZq7bQlBqhsq1tHhaiDfG82pgQ14nE-umjIN30607e0vIbvws-kuHvFDt95hu9D0SyM/s320/coundown+background.jpg") no-repeat scroll 0% 0% transparent;width: 300px;color: #000000;font-family: -webkit-pictograph;font-size: 25px;text-align: center;text-shadow: 0 0 5px #96FFE8;line-height: normal;}
.bloggerknown-clock-sep { -moz-animation: sep-blinks 1s linear 0s infinite; -webkit-animation: sep-blinks 1s linear 0s infinite; animation: sep-blinks 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>

3.

Theme 3

<style type="text/css">
@font-face {font-family: 'Frijole';font-style: normal;font-weight: 400;src: local('Frijole'), url(http://themes.googleusercontent.com/static/fonts/frijole/v2/JMJmIdqpEk7-RyNfk_4Nrw.woff) format('woff');}
a.bloggerknown-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv {padding: 5px;background: #316ca4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfu2Mpxxb9ZZS9kZDvmO0W_0NtI01fcNd5nHC-86iLayxokCuM46ZbZdouT_hB6mPJZsyVHDR0ridB8h6dFuV4KbvvmcwB167vw8o9Tm_NUpw1IVZT06azcyctCGM8RpvUUQBQ7e23nP8/s1600/coundown+bg.png) repeat-x; width: 300px;color: #000000;font-family: 'Frijole', cursive; font-size: 25px;text-align: center;text-shadow: 0 0 5px #96FFE8;line-height: normal;}
.bloggerknown-clock-sep { -moz-animation: sep-blinks 1s linear 0s infinite; -webkit-animation: sep-blinks 1s linear 0s infinite; animation: sep-blinks 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>

4.

Theme 4

<style type="text/css">
@font-face { font-family: 'Faster One'; font-style: normal; font-weight: 400; src: local('Faster One'), local('FasterOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/fasterone/v1/R45a6_a3GGq28ugU8uxGWRsxEYwM7FgeyaSgU71cLG0.woff) format('woff');}
a.bloggerknown-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv {padding: 5px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#69CFF0), color-stop(100%,#5CB440));color: #000000;font-family: 'Faster One', cursive;font-size: 25px;text-align: center;text-shadow: 0 0 5px #96FFE8;line-height: normal;}
.bloggerknown-clock-sep { -moz-animation: sep-blinks 1s linear 0s infinite; -webkit-animation: sep-blinks 1s linear 0s infinite; animation: sep-blinks 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>

Having any trouble ? comment here!