Show date on all Blogger posts within same date

Blogger groups articles written on same day together, and the template variable data:post.dateHeader is only set for the first displayed post of the day (which is the last post of the day because of non-chronological blog post order). I saw some instructions to replace dateHeader by timestamp, that is ok but you loose the timestamp under the post. I came up with this solution, tested it, googled a little more, and found that some others had invented similar hacks, too. But here is mine.



These instructions work for the "Simple" template (september 2011), may work for others, too. I will install this hack on this blog to verify, that these instructions work.



Edit your blog's HTML. If you don't know how, you should definitely read this: Know your way around.


 

Commenting out template lines



Choose Expand Widget Templates. Edit 6/2013: Select Jump to widget -> Blog1 (editor has been changed). Find the section of code (use browser's find function, ctrl+F), where this string is three times:

<b:if cond='data:post.isDateStart'>

For me that code section looks like this (it may be different for you):

        <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>

The important parts are the tree "if" lines and their corresponding "endif" lines. Put those three <b:if>'s in html comments, and also their closing tags </b:if>'s, like this:

<!--    <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> -->

This is a good way to "delete" things from your html template. Blogger will strip all comments out, so they won't clutter the final html of your blog page.



Add javascript code to copy the date



Stay in the html editor and the vicinity of those previously commented lines. A few lines up from there, look for a line like this:

<div class='blog-posts hfeed'>

After that line, add these lines:

<!-- dates for all posts (on same day)/mspotilas. commented if/endif-lines + added unindented lines: -->
<script type='text/javascript'> var postDate=&quot;&quot;; </script>

That section is not absolutely necessary, but I like to declare the variables I use (C/C++ background). Then move down about 16-20 lines, where you should find a lines:

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

After those add these lines:

<script type='text/javascript'> postDate = &quot;<data:post.dateHeader/>&quot;; </script>
<b:else/>
<h2 class='date-header'><span><script type='text/javascript'>  document.write(postDate); </script></span></h2>

Now you should have date for every post, also on posts written on the same day.

date hack template