Show Date for Each Blogger Post
I tried to figure this one out a long time ago but I had no luck back then. Today I've found a way. When you publish more than a post for a given day, only the most recent post (last post) will have it's date shown. Moreover, certain templates (like Awesome Inc) make it worse by grouping all these posts together as though they are all one single post. Although it makes sense to group posts published on the same day under a single category, lot's of users prefer to have the date shown on each post separately.
UPDATE:
I've improvised this tutorial by adding some Javascript. The timestamp does not have to be sacrificed anymore. Check out the new improvised tutorial below:
Step 1:
Go to Dashboard - Settings - Formatting - Timestamp Format - Choose a format that has a date on it.
Note: In this tutorial, you will be using your Timestamp as your Date Header. If you choose a time instead of a date as your Timestamp Format, you will be seeing time of post on top of each post, instead of its date. So choose a format that has a date in it.
Go to Dashboard - Settings - Formatting - Timestamp Format - Choose a format that has a date on it.
Note: In this tutorial, you will be using your Timestamp as your Date Header. If you choose a time instead of a date as your Timestamp Format, you will be seeing time of post on top of each post, instead of its date. So choose a format that has a date in it.
Step 2:
Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates' - Find and delete the following lines:
The code in place (starting portion):
The code in place (ending portion):
Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates' - Find and delete the following lines:
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>
The code in place (starting portion):
The code in place (ending portion):
Step 3:
Copy and paste the following lines in place of the deleted lines in Step 2:
The modified code in place:
Save Template and you're done!
Copy and paste the following lines in place of the deleted lines in Step 2:
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<div class="date-outer">
<h2 class='date-header'><span><data:post.timestamp/></span></h2>
<div class="date-posts">
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</div>
</div>
</b:loop>
<data:adEnd/>
</div>
The modified code in place:
Save Template and you're done!
Optional Step:
As you can see, instead of a timestamp, you will be seeing your date at the bottom of your posts:
As this is already shown on your post header, you might want to turn it off. You can do this by going to Dashboard - Design - Page Elements - Blog Posts - Edit - Uncheck the third box from top - Save.
Have Fun!!
As you can see, instead of a timestamp, you will be seeing your date at the bottom of your posts:
As this is already shown on your post header, you might want to turn it off. You can do this by going to Dashboard - Design - Page Elements - Blog Posts - Edit - Uncheck the third box from top - Save.
Have Fun!!
Category Article Tutorial
