Wordpress JQuery Countdown Widget

Countdown timers are important because it allows your followers and visitors to be aware of something to look forward for in any of your upcoming activities and important events. A lot of timers are available on the web right now especially for wordpress which are already been widgetized to become effortless to developers to use.
One of the problem I encountered last week is when I use JQuery Countdown Timer for my wordpress site, I almost consume more that 2 days figuring out how to display such functionality. I browsed internet and no one seems to answer my problem until I found my very own way to add this functionality. I use JQuery Countdown by Keith Wood. Here’s how

1. Visit http://keith-wood.name/countdown.html to view example and click here to download the package.
2. Extract the package to your favorite folder and open the sample “countdownBasics.html” page if working. We need this page so that we could copy some settings that we want to insert later.
3. Copy “css” and “js” folder to “wp-content\themes\[YourTemplateDirectory]”.
   Remember: This is not a widget. This tutorial is step-by-step way of inserting jquery countdown timer into your Wordpress site.
4. In your template directory, locate “header.php” and open it with your favorite text editor. I prefer to use wordpad in this.
5. In your “header.php” file, search for “</head>” and paste the following lines at the top portion of “</head>”.
   
   <script src="<?php bloginfo('template_url'); ?>/js/jquery.tools.min.js" type="text/javascript"></script>
   <script src="<?php bloginfo('template_url'); ?>/js/jquery.countdown.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/jquery.countdown.css" />
   
   <script type="text/javascript">
   $(function () {
   var austDay = new Date();
   austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
   $('#defaultCountdown').countdown({until: austDay, format: 'ODHMS'});
   $('#year').text(austDay.getFullYear());
   });
   </script>
   
   austDay.getFullYear() [+ year] – specify years to wait (i.e. austDay.getFullYear() + 1 for next year)
   1 - 1, 26 – Exact date of count down.
   format: 'ODHMS' – means the display format of countdown. Please refer to http://keith-wood.name/countdown.html for more info about format.
   
   The example above is counting down to 26 January 2012. Please correctly specify the year and date to avoid errors.
   Once added please don’t forget to save.
6. Login to your Wordpress Admin Panel and locate Appearance->Widgets.
7. Look for a “Text” Widget and drag it to your sidebar tab panel.
   
   
8. Add title to your new widget and in the content box add:
   
   <div id="defaultCountdown"></div>
   
   Then hit save.
9. Test your site and you’re done.
10. Please don't forget to share...