We all are waiting for the new year. Here is an amazing widget which count the left time for new year. The widget was developed by Mohammad Mustafa Ahmedzai . This widget can easily be added to both blogspot or wordpress. Simply copy the code and paste it in your templates. The moment new year starts, the widget will prompt an alert message saying: "Happy New year Everybody!" sharp at 12.00 a.m.

Live Demo 

Installation - 
1. Go to Blogger Dashboard > Design > Page Layout.
2. Add a Widget > HTML/Javascript.
3. Paste Below Code in Content Section.
<style style="text/css">
.lcdstyle{ /*Example CSS to create LCD countdown look*/
font: bold 20px arial;
padding: 15px;
border:5px solid #333333;
box-shadow: 5px 5px 5px #CCCCCC;

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
<script type="text/javascript">
function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds() 1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
cdtime.prototype.displaycountdown=function(baseunit, functionref){
var thisobj=this

var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24 hourfield
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60 hourfield*60 minutefield
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left
//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc

function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0] " days " arguments[1] " hours " arguments[2] " minutes " arguments[3] " seconds left until December 25, 2011 18:25:00"
else{ //else if target date/time met
var displaystring=""
return displaystring
function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>" arguments[0] " <sup>days</sup> " arguments[1] " <sup>hours</sup> " arguments[2] " <sup>minutes</sup> " arguments[3] " <sup>seconds</sup></span> "
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("HAPPY NEW YEAR EVERYBODY!") //Instead, perform a custom alert
return displaystring
<img style="float:left; " src="http://3.bp.blogspot.com/-id6x2AOCGc4/TvoJfxRT-oI/AAAAAAAAFso/HKKnQ5bcnGY/s400/NEW%2BYEAR.png" width="125px"/>
<h1 style="color:#289728; padding-top:40px;">Counting Till 2012 »»</h1><br/>
<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)
var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year 1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear 1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 31, " thischristmasyear " 0:0:00")
christmas.displaycountdown("days", formatresults2)

Save it and refresh your blog to see changes.

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM