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 .




If you like this article , then please help us by bookmarking

24 Responses to “Show Date before each Post in Blogger”

  1. 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

  2. রাশেদ 14. Aug, 2008 at 3:21 am

    Great! Loads of nice hacks. 🙂

  3. Your blog changed my blog’s face, voted and stumbled this page also,

    Thanks so much, keep up the great work, cheers

  4. 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

  5. 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

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

  7. ive got the same problem as Sandra.

  8. 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

    http://www.computorial.blogspot.com

  9. don’t work
    ” The element type “b:includable” must be terminated by the matching end-tag “”. “

  10. 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!

  11. 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

  12. 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/

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

    Thanks anyway.

  14. 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.

  15. Thanks for the post on how to implement this hack in their template to show the date before the blogger post. I hope this article will help us to add this.

  16. Thank a lot! Really this post was very useful. Actually “undefined” was being displayed in the place of date header. I was struggling for months changing the template. But this suggestion was very simple and it worked.

  17. Great post! I’ll subscribe right now wth my feedreader software!

  18. THANK YOU SO MUCH!! You’re a lifesaver:)

  19. not working in my blog always says error can you please check my blog

  20. good post. some templates don’t have this option

  21. Thanks for the great tips!

  22. thanks a lot!!
    but my template doesn’t have the – – code >__< so how else can i customize it into my template?

  23. I was looking for a hack to display the date:

    Thanks dude,

    Mushu Tricks dot Com

Leave a Reply

You must be logged in to post a comment.