Christmas Countdown Widget for Blogger

Christmas Countdown Widget for BloggerChristmas is pretty near and we have already started our count down. This widget does what the name suggests. It will display the number of days, hours minutes and second left till Christmas. When it reaches the target date, it will display a Greeting Message

Demo

You can see a demo of this Widget on my Sidebar. If you need a bigger demo, here it is:

How to Add the Widget

If you use Blogger, then you can use this Button to install the Widget in one Click.

If you want the code to use it elsewhere, then here it is :

<div id="bp_count_down_div"></div>
<script language="JavaScript">
var bp_date_target = new Date("December 25, 2011 00:00:00");
var bp_date_now = new Date();
var bp_count_down_complete_message = "Wish you all a very Happy Christmas";
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 Christmas";
 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 "" + num + "";
}
</script>

The widget makes use of some simple JavaScript methods which displays the count down based on the User’s System Time. You can customize the Widget by Editing the Widget Content. If you liked the count down, do share it with your friends and please let us know if you have any suggestions for improving the widget.

6 comments :