Blogging Tips

Calendar icons replacing date headings are a stylish trend of modern blog design. When I saw this style of date-heading on the Twitter status blog, I decided to find out how this could be adapted for use in Blogger blogs.

So in this tutorial, I’ll explain how you can replace your boring date headings in Blogger with a stylish Twitter style calendar format like this:

This is a simple customization to make to your Blogger powered blog and requires only a few modifications to your template and settings.

Here is how to add this calendar style date-format to your blog:

1. Go to Settings>Formatting in your Blogger dashboard and change the format of your date to yyyy-mm-dd. Then save this setting.
2. Next, go to Layout>Edit HTML and search for the closing </head> tag. Immediately before this tag, paste the following lines of code:
   

   <script src='http://bloggerbuster.com/scripts/fastinit.js'>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'></script>
<script src='http://bloggerbuster.com/scripts/bloggerbuster-calendar.js'></script>

3. Finally, find the closing </b:skin> tag in your template (or </skin> tag if you are using a Classic Blogger template). Just before this tag, paste the following section of code:
   

   .cal {
   text-align: right;
   width: 140px;
   float: right;
   white-space: nowrap;
   font: Normal 34px Helvetica, sans-serif;
   letter-spacing: -2px;
   color: #ccc;
   text-transform: uppercase;
   line-height: 35px;
   }
   .cal_day { float: left;}
   .date-brick {
   float: right;
   height: 30px;
   width: 45px;
   background-color: #6498cc;
   color: #bbd5f1;
   font: Bold 12px Verdana, Sans-Serif;
   text-align: center;
   line-height: 12px;
   margin-left: 10px;
   padding-top: 5px;
   letter-spacing: 0px;
   overflow: hidden;
   }

4. Now when you preview your template, you should see the stylish calendar format appear at the top right hand side of your post titles! Save your template and enjoy your funky new date headings.

How this works

The script used in this customization parses any date which is contained between <h2> and </h2> tags, replacing it with this format of date instead. You can see this customization in action in this test blog.

You can change the style and color of this calendar format by editing the style code to suit your preferences.

Troubleshooting

If you experience problems using this customization, here are a few things you can try:

• Refresh your browser to ensure the modifications to your template have been taken into account.
• Make sure you have set the correct date format for your date headings in the Settings>Formatting page of your dashboard. The format should be YYYY-MM-DD (Year, Month, Day separated by dashes).
• If all else fails, check your template code to ensure the tag <data:post.dateheader /> is contained in H2 tags. This line of code should appear like this in your template:
  

  <b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

  It may be nescessary to edit this line so that it appears like the line in red above.

Download code for the Blogger date calendar

If you prefer to host the JavaScript files required for this calendar format yourself, you can download these files below:

Funky Calendar for Blogger (Zip File)

Be sure to change the URLs to these scripts in the header section of your blog in order for these scripts to work!

What do you think?

I would appreciate your feedback about this calendar formatting customization, so please feel free to leave your comments and opinions below.