You should have noticed that in default blogger template, the date of the post comes above the title wrapped inside a h2 tag. Well not only it looks bad but also it has a negative impact on the template SEO [Search engine optimization]. So today we shall discuss how to move the date header of the post below post title (As shown on the picture right!) and also tweak it to make our template SEO friendly [Don’t worry, it is not a Black hat SEO]. Personally I have done this tweak and this has helped me a lot. So, now sharing this trick with all of you! Note that for this tweak you need to edit your template.
Having a little knowledge of CSS and XHTML will obviously help you but we shall try to cover the whole tutorial in such a manner that you will be able to modify, even if you are a newbie blogger. Please read on below to know about the implementation…
Result of this modification and requirement:
After this modification we shall have
- Moved the Post date below the title;
- Have wrapped then inside a <div> tag, instead of <h2> and will also apply styles to it!
- a Better SEO friendly template.
The only requirement is that you need a Blogger blog [@BlogSpot] and a good web browser like Firefox. Also if you wish to edit the theme not on the browser but on a good editor like Notepad++ then download it from here. Now we are ready to make the changes
STEP 1: Moving the date below title and wrapping with a div tag:
As usual go to your blogger dashboard > Layout > Edit HTML and click on the “Expand widget Templates” tab.
Now search for the following piece of code(Ctrl+F) [Tip: search for date-header]
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
and Delete that code.
Now search for this piece of code(Ctrl+F) [Tip: search for data:post.title]
<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>
Just after the whole code add this piece of code:
<div class='date-header'>
<data:post.dateHeader/>&nbsp;&nbsp;at&nbsp;<data:post.timestamp/>
</div>
So that the whole code looks like this:
<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 class='date-header'>
<data:post.dateHeader/>&nbsp;&nbsp;at&nbsp;<data:post.timestamp/>
</div>
Just preview the template now! If you have done this correctly then you should see the post date below the post title like this…
Don’t worry about the looks. We are going to change it on out next step. Having the time-stamp along with the date stamp is highly recommended as Blogger do not show date if 2 or more posts have same. Where as each one has its own time-stamp. So better we leave this code intact.
STEP 2: Styling up the Post date:
Now comes the fun part. We shall now look into the CSS code to style up the date format. After proper formatting it should look like this!
Ok so here is how! First search for some codes similar to this [Tip: Search for .date-header]:
h2.date-header {
margin:1.5em 0 .5em;
}
And DELETE that. Don’t worry about what is there inside the curly braces “{……}”. Just delete it! We will add our own style now. Now inplace of that add the following snippet of CSS code:
.date-header {
background: transparent url(http://i41.tinypic.com/ousaw2.png) no-repeat scroll left center;
font-size: 13px;
font-family: Arial;
line-height: 1.6em;
padding: 4px 0 4px 30px;
margin: 5px 0 30px 0;
}
If you don’t want to modify the code then just simply click on the “Preview” button. You should see something similar to this!
Explanation, Notes and Things to remember:
- If you have some knowledge on CSS then feel free to modify what ever you want [For example play with font-size and family].
- Also if you wish to change the clock then search for your icon here. Replace the URL under the background: definition like this (Replace the IMAGE_URL with the URL of your image)
background: transparent url(IMAGE_URL) no-repeat scroll left center;
- Also change the line-height and padding in accordance to your image dimension. [Go for some hit and trial experiments]
- Here we have kept a margin of 5px 0 30px 0 [Obviously in the order of Top Right Bottom Left] to have some space below the date. This is a good practice as the date will not mess up with the post body and the theme will look clean. If you are not satisfied with this then do change the values and see what suits you best.
And Finally HIT THE SAVE TEMPLATE Button and you are done. Note that this tutorial is based on the default Minima template. This will also work if you are using other default blogger template. If you are using custom templates then you need to understand it at your own. The basic thing is you need to delete the default date heading and put the code inside a div tag having a class date-header. Do your own part of experiments to figure this out!
Well that’s it! Now we have a better SEO tweaked Good-Looking template. Do share this with your friends if you have liked this. Also if you have faced any problem then feel free to ask us!
OmG!! Thx soo much !! 😀
You are most welcome 🙂
WOW this tutorial is great! I had a question. How do you create a custom date stamp? I have an image I'd like to use but want the date to appear within the image for every post. How do you do something like that? I think it'll further add originality to my blog.
You need to add that image as background and apply proper padding to left, bottom and top to make the date appear properly inside the image! This can be done through CSS only and I shall suggest you to use only CSS not any Javascript! If you can give me the image then I can write the code for you! You may ask here or use our contact from and I shall contact you straightaway 🙂
Really great ideas. I like every example. Just might have to try these…
more templates easy to download
I literally just needed the code for the post date as I accidentally deleted it, but this helped me think about styling the date as well, so thanks very much!
I am glad that has helped you Durkin
Thanks a lot man! That was really helpful for me
You are most welcome!
Swashata | inTechgrity.com
Thanks a lot for sharing this. I was looking for it for past so many days.
This isn't showing up for me. 🙁
If you can give me your blog url then i may check it for the possible cause!
hello thanks for this helpful toturial but unfortunately i couldn't find the date header code at all even though i checked the expand widget option, so i just went ahead and added that date header code u gave below the post title code n it gave me two date headers one below the title and other above, please can you help in this? cheers!
May be yours is a custom blogger template! If you can give me the address of your blog, then perhaps I might be able to help you out
Thanks for the tips…very useful for my new site.
Thanks so much for the code and help. This is what I was looking for. I am indebted.
I am glad that it helped u!
Great tutorial. Very easy to follow and understand. It is good that you also made a note about Blogger not showing the date for posts after the first for a particular day.
hii ..
this info was useful only my problem is that the date doesn’t show in every post, it just shows in new date posts so if I edit several posts at some date it shows only at the first post
how can I make it show in every post ?
mine is a custom template url : elfootball.net .. I wish you can help
I have the same question as Layla. I made all of the changes, but the full date/time stamp only appears on the top post from that date. If I make more than one blog post in a day, the earlier posts only show the time, not the date. I’d really appreciate your response. Thanks so much!
I had some problems with my custom template but it’s finally working, THANK YOU so much 🙂
Hey, I’ve been searching everywhere for how to move the date header below the post title, and having tried this method several times, it still doesn’t seem to be working. Any ideas? 🙂
It has been quite a long since we moved from blogger, and not at all aware of the new blogger template. But I think the logic remains the same, you need to find the date div, and put it under title h1 or h2.
Hi,
I tried just what is said, and it didn’t change anything. I can’t get any tutorial on this certain thing to work. Help?!
Okay, actually, so it worked, but now there is one above, and below the post title. 😛 🙂 What should I do?
Simply delete the date code from above the title!
Thanks!