Show Date before each Post in Blogger

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 {
display:block;
text-align: center;
float:left;height:70px;
font-family: Arial, Helvetica, sans-serif;
width:70px;
margin:0px 5px 0 0;
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/post-top_bg.png);
}

.fecha_dia {
display:block;
font-size:1.2em;
margin:0;
color:#336699;
font-weight: bold;
padding:0.7em 0 1.1em 0;
text-align: center;
}

.fecha_mes {
display:block;
font-size: 0.9em;
margin:0;
padding-top:5px;
color:#A10000;
font-weight: bold;
text-align:center;
}

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


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

.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;
height:90px;

}

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


.post-labels {
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/category-1.gif) no-repeat;
margin:0; padding:0 0 0 20px;
}

.details .post-comment-link {
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/comments-1.gif) 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'>
<script>remplaza_fecha(&#39;<data:post.timestamp/>&#39;);</script>
</div>

<div class='post_headerr'>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 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>
</h2>
</b:if>

<div class='details'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></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; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</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>
</b:if>
</b:if>
</span>

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

15 Responses So far
gravatar
Subagya
on July 31, 2008 at 8:28 PM  

Hi bro, im subagya from indonesia, can i ask you for something?
how you place a code HTML in your post like that, i mean with the border, background, and picture inside (ex :CodeView) please answer. thanks a lot,
best regards
You can email me at subagya@gmail.com

gravatar
রাশেদ
on August 14, 2008 at 3:21 AM  

Great! Loads of nice hacks. :)

gravatar
Unknown
on September 7, 2008 at 9:18 PM  

Your blog changed my blog's face, voted and stumbled this page also,

Thanks so much, keep up the great work, cheers

gravatar
Unknown
on October 27, 2008 at 2:09 AM  

dear i i have problem. ilogged in draft.blogspot.com


when i save it's say....


Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".


help me

gravatar
Sandra
on January 4, 2009 at 6:04 PM  

I can't get this to work for me. Where do you add the code to CSS? Before < /b:skin > or what?
Also I don't have the < div class='post uncustomized-post-template' > code, so what am I suppose to look for?

When I add the code, I just get a white square, no date at all.

Thanks

gravatar
Shafar
on January 21, 2009 at 9:04 AM  

Really nice hack dude!
Tips Blogger dot Com

gravatar
Unknown
on February 12, 2009 at 3:40 PM  

Hi, how i do add an icon before every link of label? Thank you.

gravatar
SLICE magazine
on February 16, 2009 at 5:30 AM  

ive got the same problem as Sandra.

gravatar
Tomaz Vorsic
on March 4, 2009 at 9:42 AM  

Sandra. I have that same problem. I suppose the problem lies in your template structure and therefore, you can not apply this trick to your template. Unfortunately this is quite common.
If you are interested in computers you are all kindly welcome to

www.computorial.blogspot.com

gravatar
FoxPrime
on March 23, 2009 at 8:21 AM  

don't work
" The element type "b:includable" must be terminated by the matching end-tag "". "

gravatar
Haidir
on April 5, 2009 at 10:55 AM  

hi Rias thank's for your articles...may i copy your article to my PC?i promise i'll not publish your article to my blog...i'm sorry if my english languange is too bad..thank you very much Rias!

gravatar
Mohamed Rias
on April 5, 2009 at 6:19 PM  

Welcome to Techie Blogger Haidir,

Yes ofcourse you can save any articles from Techie Blogger to your PC. Even you can publish these articles but you need to put a read more link to Techie Blogger.

If you need any help contact me....... my google talk id mohamedrias1103@gmail.com

regards,
Mohamed Rias

gravatar
Anonymous
on April 23, 2009 at 10:07 AM  

Hi, I am Tony from Kenya and I have a problem with my post date. I have an almost similar calendar template and the dates just wont display. When I tried modifying the script with yours I got a 'No dictionary named: 'post' in: ['blog']'error.

http://gladysmoore.blogspot.com/

gravatar
Anonymous
on April 23, 2009 at 10:11 AM  

Never mind, the dates displayed after I returned to the previous script and refreshed, I cannot explain how.

Thanks anyway.

gravatar
Anonymous
on May 4, 2009 at 1:27 PM  

I can't seem to get this to work.
Could anybody help me if I gave the css? Or you can take it from my site itself.
http://yazuka.blogspot.com

I'm a real noob when it comes to stuff like this, so helt would be very mich appriciated.

Post a Comment

Custom Search
Web Analytics