Date under Post Title - Move date in Blogger

November 20, 2008

In this tutorial we'll learn how to move (change the position) of the Date in Blogger. We will move it UNDER (below) the Post Title (by default, it's ABOVE it).
We'll have to tweak the HTML code a bit. Until Blogger provides automated way of doing this....And I hope it will.

If you're ready, let's do it. First thing is backing up your Blogger template.

I'll show you 2 ways of doing this. I suggest to follow the example 1. If you'll have problems, then try with example 2.

1. Go to:
DASHBOARD ► LAYOUT ► EDIT HTML ► click on Expand widget templates in the upper right corner. Locate the following part of code:

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

...CUT it, and paste into Notepad (windows) or TextEdit (Mac)..

Now, you have to find this part of the code:

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

...and PASTE the code (you've copied to Notepad/TexEdit) UNDER (below) it, so it will look like this all together:

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

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

...click on Preview button to see is everything all right, and if it is, Save.

That's it. Now, we'll see how can we adjust the margins of the date to lose the gap between Post title, and to gain some between content. In LAYOUT ► EDIT HTML ► find the CSS style for the date:

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

...we'll change it into this:

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

...in pink, decreasing the top margin, we've "pulled" the date up..
...in green, increasing the bottom margin, we've gained some space between date and content..


2. Read this tutorial only if the example 1 is not working for you....
Go to:
DASHBOARD ► LAYOUT ► EDIT HTML ► click on Expand widget templates in the upper right corner...
Read the complete tutorial...

CSS STYLE
Insert the code (in pink) ABOVE the existing code in template (in white):

#mydate {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

.date-header {
display:none;
}

]]></b:skin>
</head>

...I've copied the same date style as it was before (default one). You can customize it, of course (change font size, weight, margins, color, alignment...)
...I've also hidden the default position of Date...


PLACING A "DIV" FOR DATE
Using CTRL + F for easier searching, locate the following part of code:

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

....your code may be a bit different (like the part in blue), but the procedure is the same.
Next thing is to add the following line of code:

<div id='mydate'><data:post.dateHeader/></div>

....we have to place it BELOW the upper part of code, so it will look like this:

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div id='mydate'><data:post.dateHeader/></div>

...added code is in orange. Save Template.

NOTE:

• you can change ID "mydate" to whatever you want, it doesn't make any difference (if you do, change it in CSS too)
• remember that you can customize you new date (for example, if I want to align it to the right, I'll add this line in CSS: text-align:right; )..