How to move date below the post title in Blogger

This tutorial will show you how to move the date below the post title on your Blogger blog. This has been made a lot easier since the Blogger 2013 Update. A lot of people prefer the date beneath the title of the post, here are two ways how to do it (with some styling fixes at the end of the post).

Method 1 – Move post date beneath post title on Blogger

1. Go to the Template tab in the dashboard and click Edit HTML. Click Format Template which used to be “Expand Widget Templates”.
2. Click on the Jump To Widget Template and choose Blog1
3. This will take you to the line with a fold marker ► beside the numbering. Click on it to expand the widget code.





4. You will see a line with the following code. Click the fold marker beside this line.

   <b:includable id='main’ var='top’>...</b:includable>



5. Within this, you will see the following code

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



6. Copy this code to a text file and delete it from your HTML.
7. Find the following code in your HTML using the search bar. To search, click into the HTML box and press CMD F on a Mac or CTRL F on a PC. Enter the code into the search box and hit enter. Paste the code you’ve copied underneath this line. If you find two versions of the code, paste it under the second which will be further down in your HTML, use the numbering on the left to help you! This is very important!

   <div class='post-header-line-1'/>

   

   

   

   

8. Click Preview to check that it has worked properly and that no code has been messed up. If there’s a gap between the title & date then follow the instructions at the very end of this tutorial.

Method 2 – Move post date beneath post title on Blogger

1. Go to the Template tab in the dashboard and click Edit HTML. Click Format Template which used to be “Expand Widget Templates”.
2. Click on the Jump To Widget Template and choose Blog1
3. This will take you to the line with a fold marker ► beside the numbering. Click on it to expand the widget code.
4. Within this, you will see the following code

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

5. Cut the following code and paste it into a text editor such as notepad, text wrangler or text edit.

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

6. Find the following code. If you find two versions of the code, paste it under the second which will be further down in your HTML, use the numbering on the left to help you! This is very important!

   <b:if cond='data:post.title'>
    <h3 class='post-title entry-title' itemprop='name'>
   <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
   <b:else/>
    <b:if cond='data:post.url'>
   <b:if cond='data:blog.url != data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
   <b:else/>
   <data:post.title/>
    </b:if>
    <b:else/>
   <data:post.title/>
    </b:if>
    </b:if>
    </h3>
   </b:if>

7. Paste the code you copied underneath this

   <b:if cond='data:post.title'>
    <h3 class='post-title entry-title' itemprop='name'>
   <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
   <b:else/>
    <b:if cond='data:post.url'>
   <b:if cond='data:blog.url != data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
   <b:else/>
   <data:post.title/>
    </b:if>
    <b:else/>
   <data:post.title/>
    </b:if>
    </b:if>
    </h3>
   </b:if>
   
   <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
   </b:if>

Fix Styling – Remove the Gap between Post title & Date

Blogger templates are already set up with appropriate spacing, so when we alter the template we need to adjust the spacing (padding, margins, etc) as well. The following will show you how to reduce or remove the gap between the post title and the date.

1. Go to Template > Edit HTML and find </b:skin>. Having trouble? Check out the post on editing CSS on Blogger.
2. Above </b:skin> paste one of the following into this section. The code will depend on your particular template but one of the following should work for most templates. You may have the code in your template already, search for the part in pink and change the values in your template to match the values below.

 .post { margin: 0px; padding-bottom: 0px;} 

 h2.date-header  { margin: .5em 0 1.5em; } 

 date-header  { margin: .5em 0 1.5em; }

 .post-header  { margin: 0px; }

3. Edit the number to suit your blog & layout.