How To Seperate Two Posts On The Same Date In Blogger - Blogger Label Problem

In Blogger templates sometimes we encounter a problem that when we click on a label, we find that two posts are joined with each other while others are separated with a small space. Generally this happens in the Templates that are provided by Blogger, and this happens because it merges the two posts that are published on the same date. We also encounter this problem when we select more than one post for the blog's Home Page.

So for this problem i have found a proper solution and in this post i am going to show you how to separate the posts which are published on the same date.

Also read: How to remove "showing posts with label" in Blogger ?

This could be done in following simple steps shown below :

• Step 1: Log in to your Blogger Account.
• Step 2: Go to Dashboard >> Template >> Edit HTML.

To Enlarge the Image please click on them.

Screenshot

Note: Before doing any editing in the template's Edit HTML section i recommend you to download your current template using the Backup/Restore Tab so that if anything goes wrong while editing the template then you can again upload your same template.

• Step 3: Now in Edit HTML section click on "Jump to Widget" and then select "Blog 1" from the tab list as shown below.

To Enlarge the images template please click on them.

• Step 4: Then Expand the Blog 1 code as shown in screenshot.

To Enlarge the images please click on them.

• Step 5: Now expand this " <b : includable id='main' var= 'top' >...</b : includable>   "code as shown below in screenshot. 

Screenshot

• Step 6: Now, Search for this code:

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

Note: To search the above code you can use CTRL+F.

• Step 7: Your code 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>

• Note: This code " <b:if cond='data:post.isDateStart'> " appear three times with its Ending </b : if>  Code.
• Step 8: Now you have to convert all three of them into comments as shown below and also shown in screenshot.

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

To Enlarge the images please click on them.

• Note : Converting these codes into comments saves you from deleting it so that if you want to use the code again then you can remove the comments and your code will again become active.
• Step 9: Now, search this code just 3 or 4 lines above your previous code or use CTRL+F to search the code.

<div class='blog-posts hfeed'>

• Step 10: Now, add the below code just after the above code as shown in screenshot below:

<!-- dates for all posts (on same day)/mspotilas. commented if/endif-lines + added unindented lines: -->

<script type='text/javascript'> var postDate=&quot;&quot;; </script>

To Enlarge the images please click on them.

• Step 11: Now the final thing, search this code generally you will find it four or five lines below the above code.

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

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

• Step 12: And paste the below code just after the above code as shown in screenshot.

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

Screenshot.

• Step 13: Now click on "Save Template" tab and you are done.

Also read:

• How to add contact form to your blog ?
• You might also like widget for Blogger.