Show Date before each Post in Blogger

Monday, July 14, 2008 in , by Mohamed Rias

You might have noticed in my template that there is a date widget before each post. Only a very few templates will have this. I hope to have a best and beautiful template we must concentrate in all minute things. So I decided to help my visitors to implement this hack in their template too. In this post I will give you the code what i have in my template , you guys can customize it to suit your template. If you have any doubts ask me in comment section.

Let' s start :

Go to settings then Formatting and change the date header format and other things similar to this you find in the image below

After doing this save your settings . Now navigate to edit HTML section and check exchange widgets , Then add the following CSS code in the CSS section of your template

#fecha {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin:0px 5px 0 0;

.fecha_dia {
font-weight: bold;
padding:0.7em 0 1.1em 0;
text-align: center;

.fecha_mes {
font-size: 0.9em;
font-weight: bold;

.fecha_ano { display:none; visibility:hidden; height:0; }

.post-title, .post-title a {
margin-bottom:20px; padding:2px 0 0 0;
.post-title a hover {color:#00335B;text-decoration:none}
.post h2 {
font-family: Arial, Georgia, Sans-serif;
font-size: 18px;

.post-body {
font-family: Verdana, Arial, Georgia, Sans-serif;
font-size: 13px;margin-bottom:20px;margin-left:170px;
line-height: 1.3em;
margin: 3px 0 5px 0;

.post_header {
margin:0; padding:0;


.post_headerr {
margin-bottom:20px; padding:0;

.post-labels {
background:url( no-repeat;
margin:0; padding:0 0 0 20px;

.details .post-comment-link {
background:url( no-repeat;
margin:0; padding:0 0 0 20px;

and now search for this following code <div class='post uncustomized-post-template'> or similar and then select the code below that line upto <div class='post-body'>
and replace that code with the following code

<div class='post_header'>
<div id='fecha'>

<div class='post_headerr'>

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

<div class='details'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</span> |
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

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

Now you can see date before each post.

Screenshot :

Anything else you can do with this ?

yes, In the CSS code you can see some codes are in red . You can change the codes in red to suit your template .

Write comments about this post and give me your suggestions .

Check Out This Popular Posts

2 Responses So far
on July 28, 2010 at 10:59 AM  

greetings to all.
I would first like to thank the writers of this blog by sharing information, a few years ago I read a book called guanacaste costa rica in this book deal with questions like this one.

on August 17, 2010 at 9:07 AM  

Hello .. firstly I would like to send greetings to all readers. After this, I recognize the content so interesting about this article. For me personally I liked all the information. I would like to know of cases like this more often. In my personal experience I might mention a book called Generic Viagra in this book that I mentioned have very interesting topics, and also you have much to do with the main theme of this article.

Post a Comment