48 How to create a calendar widget for your blog October 08, 2007 /

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 <data:post.dateHeader> 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: <h2> or <h3> etc.). Instead, we need to wrap this in <div> tags with a class of "date-header", so the line will look like this:

   <div class="date-header"><data:post.dateHeader/></div>

   . 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 </head> tag, add this section of code:

   <!-- calendar widget -->
   <script src='http://bloggerbuster.com/scripts/fastinit.js'/>
   <script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
   <script src='http://bloggerbuster.com/calendar.js'/>
   <link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
   <!-- end calendar widget -->

   Save your template and view your blog to see the new calendar widget in place!

I originally found a tutorial for this Blogger hack over at Orangevolt which uses a script to parse date headers wrapped in <H2> tags. However, I decided to modify both the code and the image used which ensures greater flexibility over where the widget can be placed.

Customizing the calendar widget

If you would prefer to customize the calendar widget to suit your own taste and style, you can do this by modifying the CSS styling used for this hack.

There are two ways of doing this: you can either download the CSS file, modify and upload to your own server, or copy the styling below into the b:skin section of your template to change the style from within the template itself.

This is the styling I used for the calendar widget:

span.cal {
background:transparent url('images/calendar.jpg') no-repeat scroll 0%;
float:left;
margin-right: 10px;
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:10px;
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:1px;
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;
}

As you can see, there are many ways the calendar widget may be styled, including:

• The image background (use the full url if you decide to change this image!)
• The height and width of the calendar icon
• The alignment of the calendar (change "float: left" to "float: right" if you would prefer the widget to appear on the right of the page, for example).
• The font and text sizes

plus many more examples than I can list here.

I would suggest that it is better to link to a css file on an external server than to use this styling inside the template. This is because I often noticed problems with the styling in Internet Explorer when I experimented with the styling in the b:skin area. There seem to be no problems at all when linking to the external style sheet.

You may also like to experiment with the positioning of the date header in your template. In this blog for example, I placed the date header code directly before the post title section, which ensures it appears to the left of the post title.

Why doesn't the calendar appear on some of my posts on the main/archive pages?

The date header will only appear on the top most item which is posted on a given day. So if you post say, three times in a single day, only the newest post will feature the calendar widget. So far, I haven't figured out a way to make this appear for each and every post!

Note: This post has now been edited to correct an error in the code which may have prevented this hack from working in your blogs. I do apologize for this problem guys! Everything should work fine for you now!

Please let me know what you think of the calendar widget by leaving your comments and opinions below.

Technorati Tags: calendar | widget | web+2.0 | style | blog | date+header