Show Date and Timestamp for Each Blogger Post

Re-tweaked by popular demand! Previously, I wrote a tutorial on how you can tweak your template to show date for each one of your Blogger posts. By default, posts that are published on the same day will have only one date shown, particularly on the last published post. In some templates, posts that are published on the same day are even grouped together (see image above).

In my old tutorial, I replaced the date with the timestamp. In other words, the timestamp had to be sacrificed just to have dates shown on each blogger post. But this time around, I've imrpovised the tweak by using some Javascript. You won't have to tamper with your timestamp to have the dates shown on each post. You get both Date and Timestamp with this tweak, and it's wayyy shorter than the other one!

Note: If you've already done my previous tweak, and wish to 'resurrect' your timestap, please undo/reverse the other tweak first before attempting this one.

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - 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 == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </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'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
            <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </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:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>

The lines to be deleted (Starting portion).

The lines to be deleted (Ending portion).

Step 2:

Copy and paste the following lines in place of the deleted lines in Step 1:

<!-- 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'>
<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
         <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </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>
   </div>
  </div>
 </b:loop>
 <data:adEnd/>
</div>