Thursday, December 26, 2013

New Year Countdown Widget for Website/Blog

at 10:13 AM
2 Comments

new year countdownFirst 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.
New Year Countdown Widget
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.  
New Year Countdown Widget
Theme 2

<style type="text/css">
a.bloggerknown-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv {padding: 5px;background: url("http://2.bp.blogspot.com/-Vu7RjIkx5HA/UruLyn0bKsI/AAAAAAAABZM/dfR20lQ6Xfk/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.
New Year Countdown Widget
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(http://2.bp.blogspot.com/-RihPychT8Jg/UruhkKlEPpI/AAAAAAAABZo/A4ktmAYLQ-Q/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.
New Year Countdown Widget
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! 
Get Free Updates:

2 comments:

  1. An awesome widgets...
    Thank you so much Mr.Azeem and Happy new Year.
    http://www.bloggerkinds.blogspot.com

    ReplyDelete

Your feedback is always appreciated. we'll try to reply to your queries as shortly as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please don't spam Spam comments will be deleted immediately upon our review.

Regards,
Mohammad Azeem