Show Date For All Posts in Blogger

Most bloggers prefer to display the date a post was published, which is often relevant to the subject matter of the post. Indeed, most blog templates include some elements of CSS styling for the post date (or date heading as it is often known).

When using Blogger to publish your blog, the date heading is only displayed for the most recent post of any given day. This means that if you make several posts in a single day, the date heading will only display for the last post published in this day.

While readers of your blog may be able to deduce the posting date in relation to other posts, many of us would prefer to simply display the date, especially when using a calendar icon or other template styling to display the date in a particular way.

In default Blogger templates (and indeed in most third party templates) there is no option but to use the restrictive <data:post.dateHeader> tag to display the date only for one post each day.

So in this post, I’ll explain a quick and simple customization which enables you to display the date for all posts in your blog, to inform your readers of the exact date of posting and ensure any date styling in your layout is rendered correctly.

Using the “Time-stamp” tags

The only method we can use to display the date on all posts on home and archive pages with Blogger is to replace the <data:post.dateHeader> tag with that usually reserved for the timestamp (permalink).

This is because the Blogger engine will render only one date-header statement for each day of posts, whereas timestamps are generated for each and every post.

If you take a look at the Settings>Formatting page in your Blogger dashboard, you will notice there are numerous options for formatting the date style for the timestamp, many of which mimic those used for the actual date heading.

The method we need to use for this customization involves switching the date-header tags for timestamp tags, and formatting the timestamp so it appears more like a date-heading instead.

Changing the template code to accommodate the date for all posts

This is a very simple customization to make.

Simply go to Layout>Edit HTML in your Blogger dashboard and check the “Expand widget templates” box.

Then search for the following section of code (or similar):

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

Be aware that in your own Blogger template, the <h2> tags may have been replaced with a DIV or H3 tags instead. However, the surrounding code should appear in the same way.

Replace this entire section of code with the following instead:

<h2 class=’date-header’><data:post.timestamp/></h2>

Then preview your blog. If you have made more than one post in a single day, you will now see that the time-stamp is displayed for all posts on this day, whereas the date-header previously used would only display once for each day.

Optional:

As you are using the timestamp for the date heading of your posts, you may prefer to remove the timestamp from the post-footer section.

If this is the case, find the following section of code in your template:

<b:if cond=’data:top.showTimestamp’>
<data:top.timestampLabel/>
<b:if cond=’data:post.url’>
<data:post.timestamp/><a class=’timestamp-link’ expr:href=’data:post.url’ title=’permanent link’>Permalink</a>
</b:if>
</b:if>

And delete this entire section of code.

Be sure to preview your template agian before saving to ensure you have not accidentally deleted (or altered) any other aspects of your layout.

Formatting your new date heading

By default, the timestamp in Blogger blogs is set to display the time of posting, rather than the date. You may prefer to change this setting to reflect the date as this is more appropriate and informative for your blog readers.

To change this format, go to Settings>Formatting in your Blogger dashboard. On this page, you will notice a drop-down menu where you can choose the format for your timestamp:

The timestamp format setting for your blog

Simply choose a setting which you feel would be more appropriate for your layout, and save this setting. Personally I prefer the full date option (ie: Tuesday, October 14 2008) though you may prefer a shorter date format instead.

Using this customization to display a calendar icon for each post

There are several Blogger customizations available which enable you to display a calendar icon to replace the date heading of your posts. It is possible to make this calendar icon display on all posts of your home and archive pages using the customization we have explored in this tutorial.

An example of a calendar icon

An example of a calendar icon

However, you should check the date format required to display your calendar icon correctly, and adjust the setting for your timestamp format accordingly.

Most calendar widgets for Blogger require the date to be formatted like this: dd-mm-yyyy. Unfortunately, this format is not available to use for timestamps. In this case, you would need to edit the JavaScript file used to parse the date in your posts, and replace this with a date-format which you can use as a timestamp (eg: dd/mm/yy).

Once you have edited the JavaScript file, upload this to your own hosting account and change the reference to this file in the <head> section of your Blogger template. You will then be able to see your calendar icon appear for all posts in your blog layout.

Here are two different calendar widgets which you could use in Blogger blogs:

I hope these tips have provided you with useful information for displaying date headings on your blogger posts. Please feel free to let me know what you think by leaving your comments and opinions below.

  •  
  •  
  •  
  •  
  •  

Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.

7 Comments

  1. Tinh November 18, 2008
  2. Kevin Muldoon November 18, 2008
  3. Jane November 19, 2008
  4. Clangnuts December 1, 2008
  5. Leo December 23, 2008
  6. dhm October 10, 2010
  7. Harish Bhatt March 29, 2011