Wednesday 8 January 2014

How to show date on all Blogger posts within same date

Blogger by default groups articles written on same day together. If you want to show date on all the posts written on the same day, you can follow the below steps.

Step 1: Edit your blog's HTML.
Step 2: Find the section of code, where this string is three times: <b:if cond='data:post.isDateStart'>



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


    Now, Put three <b:if>'s and their closing tags </b:if>'s in html comments, 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>    -->


Step 3: A few lines up from the previous commented lines, you will find a line like this:
<div class='blog-posts hfeed'>
   
     After that line, add this line: <script type='text/javascript'> var postDate=&quot;&quot;; </script>

Step 4: Now, move down about 16-20 lines, where you should find lines like this:
    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>


     After those lines, 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>


Step 5: Now, Save the template and view the blog. Now, you should have date for every post including the ones written on the same day.

Enjoy :)

No comments:

Post a Comment