Add New Year Count Down To Blog

Year 2012 is pretty very near so let us add New Year widget that shows how many days, hours, minutes and seconds are left celebrate New Year 2012. One thing that I have noticed in most of the widgets is that, it displays a message when it reaches its target. Like on 01.01.2012 my widget will display " Wish You all a Very Prosporous and Happy New Year".

This widget uses a simple javascript to display count down based on the Users system time.

Happy New Year Count Down Demo.

How To Add New Year Count Down Demo To Blog.
1. Go to Design Tab in your Blog > Page Element Tab.
2. Click on "add a widget" then select "HTML/Javascript" Widget.

3.Paste below Javascript code to it.

<div id="bp_count_down_div"></div>
<script language="JavaScript">
var bp_date_target = new Date("January 1, 2012 00:00:00");
var bp_date_now = new Date();
var bp_count_down_complete_message = "Wish You all a Very Prosporous and Happy New Year";
if (bp_date_now >= bp_date_target) {
 document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message;
} else {
 bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000);
 display_time_difference(bp_time_difference);
}
function display_time_difference(bp_time_difference) {
 if (bp_time_difference <= 0) {
 document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message;
 return;
 }
 bp_count_down_message = bp_format_seconds(bp_time_difference, 86400, 100000) + " Days " + bp_format_seconds(bp_time_difference, 3600, 24) + " Hours " + bp_format_seconds(bp_time_difference, 60, 60) + " Minutes " + bp_format_seconds(bp_time_difference, 1, 60) + " Seconds for New Year";
 document.getElementById("bp_count_down_div").innerHTML = bp_count_down_message;
 setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000);
}
function bp_format_seconds(secs, num1, num2) {
 num = ((Math.floor(secs / num1)) % num2).toString();
 if (num.length < 2) s = "0" + num;
  return "<b>" + num + "</b>";
}

</script>

4. Save your widget and view your Blog.

Posted in: How To's,Java Script