How To Display Each Post Separately Under DateHeader In Blogger?

Hi, This time, we are here for blogger template designer or editors. As you know that in Blogger Official Templates, if you will publish more then 1 post on same date then it will show them under one date header and one  “date-outer” class. You cant customize that officially to show same date post under new DIV as you can do in WordPress…

So if you are designing a template and applying CSS on “date-outer” class then if your template user have two post under same date then it will make a mess but putting two posts under one DIV and will be more mess if you will add a fix height to the post DIV by thing that ll post are maximum this size height but what will when two posts will be in one DIV.

Now to solve this error, here we are with some codes that will let you to make same date post too under different DIV. To understand what we are saying, just see the below screenshot that is before and after the code. If you are a designer then you can understand the code easily.

Features:

1.) Just Little Code Editing.
2.) No External Or New Codes.
3.) Will Make All Posts Under Different “date-outer” DIV In Blogger.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search The Below Code.

<!-- 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='comments'/>
</b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'> &lt;/div&gt;&lt;/div&gt;
</b:if> <data:adEnd/>
</div>
<!-- navigation -->

7.) Now Copy The Below Code And Replace It With Above Code..

<!-- 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/><data:post.dateHeader/></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>
<!-- navigation -->

8.) Click “Save Template” And Done.

Last Words:

This is what we have for blogger template designers and editors. We have more for you to design your blogger template yourself so stay with us. Now if you liked it then share it and leave your comment or if have any query, then feel free to contact us.