How to create a calendar widget for your blog

In this template, I use a calendar style widget to display the posting date of my posts. This style has recently cropped up in many Web 2.0 style Wordpress blogs, and is easily reproduced in Blogger layouts blogs too. Here I will show you how to create your own calendar widgets to feature at the top of each post.

This Blogger hack uses a combination of javascript, CSS and some slight modification to your template to display the date a post was published over a calendar-style background. There are only three main steps to change your date header to a calendar widget, so don't worry if my explanation seems rather complicated! Here is what you should do:

1. First, go to Settings>Formatting, and change the date header format to YYYY-MM-DD like this:
   
   
   
   This enables the script we will be using to correctly parse the date header format.


2. Next, go to Template>Edit HTML and ensure you have checked the "expand widget templates" box. Now, find the section in the posts widget (if you search for "dateHeader" you should be able to find this quickly).
   
   
   The "data:post.dateHeader" line may also be wrapped in headings tags (eg:

   or

   etc.). Instead, we need to wrap this in

   tags with a class of "date-header", so the line will look like this:
   

   .
   Once you have changed this line, save your template.



3. Finally, open up the Edit HTML section again (no need to expand widget templates this time). Just before the closing tag, add this section of code: