How to Enable "Show Date Header" Option in Blogger Template - Step by Step Guide

If you want to display date headers above your blog posts in Blogger, follow these steps to enable this feature in your template.

Method 1: Using Blogger Settings (Easiest Way)

1. Log in to your Blogger account

2. Go to your blog's dashboard

3. Click on "Theme" in the left sidebar

4. Click on "Edit HTML" button

5. Look for this code in your template:

   xml

   Copy

   Download

   Run

   <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

6. Inside this widget, look for the <b:includable id='main' var='top'> section

7. Add or modify the following line inside this section:

   xml

   Copy

   Download

   Run

   <b:if cond='data:view.isMultipleItems and data:view.isDateHeader'>
     <h2 class='date-header'><data:view.dateHeader/></h2>
   </b:if>

8. Save your template

Method 2: Manual CSS Styling (More Control)

If you want more control over how the date headers appear:

1. Follow steps 1-4 from Method 1

2. Add this CSS code before the ]]></b:skin> closing tag in your template:

   css

   Copy

   Download

   .date-header {
     font-size: 18px;
     color: #555;
     margin: 20px 0 10px;
     padding: 5px 0;
     border-bottom: 1px solid #eee;
   }

3. Then add the date header code from Method 1 (steps 5-7)

4. Save your template

Method 3: For Custom Templates

If you're using a custom template that doesn't show dates:

1. Follow steps 1-4 from Method 1

2. Search for the post loop in your template (usually contains <b:loop values='data:posts' var='post'>)

3. Before the loop starts, add:

   xml

   Copy

   Download

   Run

   <b:if cond='data:view.isMultipleItems and data:view.isDateHeader'>
     <h2 class='date-header'><data:view.dateHeader/></h2>
   </b:if>

4. Save your template

Troubleshooting

If dates still don't appear:

• Make sure you're viewing the blog in a view that shows multiple posts (homepage, archive pages)

• Check that your posts have different dates (dates only show when there's a date change between posts)

• Clear your browser cache after making changes