Date header hack for blogspot

Aug 2, 2007

Hi,

This is a simple hack for everyone who wants to use date header like wordpress style. Here is a sample link (wordpress style). If you are interested, This 3 steps guide will show you how to do that. First of all, you should backup your template.

1. Go to Setting >Formatting > Date header format. Choose Aug 2, 2007 format. Save setting.
2. And then go to Template> Edit HTML > and click the box next to expand widget Templates.
Find h2.date-header in your CSS section. Code look like

/* Posts
----------------------------------------------- */
h2.date-header {
margin:0 28px 0 43px;
font-size:85%;
line-height:2em;
text-transform:uppercase;
letter-spacing:.2em;
color:$dateHeaderColor;
}

Add red codes to there.

h2.date-header {
margin:13px 7px 0 20px;
font-size:85%;
line-height:1.2em;
border-left: 1px solid #8b8682;
float: right;
padding-left: 3px;
width: 45px;
text-transform:uppercase;
letter-spacing:.2em;
color:$dateHeaderColor;
}

Adjust codes yourself after previewed (margin: Border color: float left or right: background color or image: font size:). Use width between 35 and 45px. Depend on your font size.

3. Find codes

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

Slect all and cut them. Find again this code <div class='post-body'>
Put codes which you cut to below <div class='post-body'>

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

Preview your template, if everything is ok. Save your template and we are done!!!
If you want to add background color or image, add this
background: #ccc url('http://www.yourpic.com') no-repeat;
Cheers!

blog tips