Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Thursday, December 2, 2010

Show Date for Each Blogger Post

I tried to figure this one out a long time ago but I had no luck back then. Today I've found a way. When you publish more than a post for a given day, only the most recent post (last post) will have it's date shown. Moreover, certain templates (like Awesome Inc) make it worse by grouping all these posts together as though they are all one single post. Although it makes sense to group posts published on the same day under a single category, lot's of users prefer to have the date shown on each post separately.


UPDATE:
I've improvised this tutorial by adding some Javascript. The timestamp does not have to be sacrificed anymore. Check out the new improvised tutorial below:



Step 1: 

Go to Dashboard - Settings - Formatting - Timestamp Format - Choose a format that has a date on it.


Note: In this tutorial, you will be using your Timestamp as your Date Header. If you choose a time instead of a date as your Timestamp Format, you will be seeing time of post on top of each post, instead of its date. So choose a format that has a date in it.

Step 2:

Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates' - Find and delete the following lines:
<!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:defaultAdStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.isDateStart'>
        <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
      </b:if>
      <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-outer&quot;&gt;
      </b:if>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      </b:if>
      <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-posts&quot;&gt;
      </b:if>
      <div class='post-outer'>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
      </div>
      <b:if cond='data:post.includeAd'>
        <b:if cond='data:post.isFirstPost'>
          <data:defaultAdEnd/>
        <b:else/>
          <data:adEnd/>
        </b:if>
        <div class='inline-ad'>
          <data:adCode/>
        </div>
        <data:adStart/>
      </b:if>
      <b:if cond='data:post.trackLatency'>
        <data:post.latencyJs/>
      </b:if>
    </b:loop>
    <b:if cond='data:numPosts != 0'>
      &lt;/div&gt;&lt;/div&gt;
    </b:if>
    <data:adEnd/>
  </div>

The code in place (starting portion):


The code in place (ending portion):



Step 3:

Copy and paste the following lines in place of the deleted lines in Step 2:
<!-- posts -->
<div class='blog-posts hfeed'>

 <b:include data='top' name='status-message'/> 

 <data:defaultAdStart/>
 <b:loop values='data:posts' var='post'>
  <div class="date-outer">
   <h2 class='date-header'><span><data:post.timestamp/></span></h2>
   <div class="date-posts">
    <div class='post-outer'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == "static_page"'>
     <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:blog.pageType == "item"'>
     <b:include data='post' name='comments'/>
     </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
     <data:post.latencyJs/>
    </b:if>
   </div>
  </div>
 </b:loop>
 <data:adEnd/>
</div>

The modified code in place:

Save Template and you're done!

Optional Step:

As you can see, instead of a timestamp, you will be seeing your date at the bottom of your posts:


As this is already shown on your post header, you might want to turn it off. You can do this by going to Dashboard - Design - Page Elements - Blog Posts - Edit - Uncheck the third box from top - Save.

Have Fun!!

85 comments:

  1. That's cool man. I was lookin' for that! Tnx! Good Job!

    ReplyDelete
  2. Sodoo: Glad it helped. Thanks for dropping by. Merry Christmas.

    ReplyDelete
  3. Thanks Yoboy! I have one problem though - the date now shows on static pages. Is there a way to hide it there? Thank you always!

    ReplyDelete
  4. Raindropsoup: If you want to hide the date from all your static pages, go to Dashboard - Design - Edit HTML - Find for </b:skin>
    - paste the following code directly below </b:skin>

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <style>
    .date-header{
    display: none;
    }
    </style>
    </b:if>

    Regards.

    ReplyDelete
  5. Hey bud,

    thank you so much for doing this. It solved my simple problems. I do want to add the time at the bottom back though. Please help =)

    ReplyDelete
  6. Jaynu: Hi there. Well, you cant have both the time and date shown in all posts. It's something that you need to choose, either show the time (default) or show date for all posts.

    Regards.

    ReplyDelete
  7. This is just what I was looking for. Thanks so much!

    ReplyDelete
  8. @Alana: Glad you find it useful. You're welcome. Enjoy your stay here.

    ReplyDelete
  9. hey, thanks so much for the tutorial! It's been driving me crazy and you just brightened my day!

    ReplyDelete
  10. @LGibbs: No problem at all, glad you like it.

    Regards.

    ReplyDelete
  11. I used this tutorial so that I can keep my timestamp and date each post: http://www.anshuldudeja.com/2009/11/how-show-post-date-for-blogger-posts.html

    I want to use your tutorial to separate the posts, but I can't because the code for creating a date for each post is in there. Is there a way for me to still use your tutorial?

    My site is: www.cfrajerman.com

    Thanks!

    ReplyDelete
  12. thanks, it helped a lot...

    but i was wondering, isnt there any way at all to show the time and date?

    i tried to play with some variables there, but then the date shows up on only one post...

    ReplyDelete
  13. @Chelsea: If you have done the steps in that tutorial correctly, you should be able to separate the posts. I'm not sure though, I have not tried it.

    In my tutorial, I have replaced the date with the timestamp. So there isn't a way to show both date and timestamp if you want to use the method I have shown here in this post.

    @Aquib Mastan: It is possible if you make use of Javascript, in which you wont be using the conventional 'timestamp' and 'dateHeader' variavles. If you want to avoid javascript, I'm afraid there isn't any other way to show both date and time. In this tutorial, I have replaced the usage of 'dateHeader' with 'timestamp'. This is because 'dateHeader' can only be spanned once for each day. It won't show if you try to span it more than a time.

    ReplyDelete
  14. Interesting workaround. Thank you. I'd like to use this to split posts from the same day, but *not* show any date at the top (I usually use the timestamp at the bottom alone to show date/time). Is this possible? So the post would show the title, body of the post, and then all the regular items at the bottom (comment, timestamp etc.)

    Also, I have a question about your comment highlighting. I know how to highlight the text in my replies, but I've been looking for a way to highlight the entire comment block including the blog author name and avatar, as you've done. Could you please tell me what code you used to extend the highlighting to the entire block? Thank you!

    ReplyDelete
  15. Ignore my 2nd question about block highlighting. Just found your post (couldn't find it at first!) Would still love to know the answer to my first question re: no date at top. Thanks!

    ReplyDelete
  16. @Noisy Quiet: You sure can. This is what you should do:

    1) Skip Step 1
    2) Perform Step 2
    3) Use this code in Step 3
    4) Skip optional step

    Cheers.

    <!-- posts -->
    <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:defaultAdStart/>
    <b:loop values='data:posts' var='post'>
    <div class="date-outer">
    <div class="date-posts">
    <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "static_page"'>
    <b:include data='post' name='comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <b:include data='post' name='comments'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
    <b:if cond='data:post.isFirstPost'>
    <data:defaultAdEnd/>
    <b:else/>
    <data:adEnd/>
    </b:if>
    <div class='inline-ad'>
    <data:adCode/>
    </div>
    <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
    <data:post.latencyJs/>
    </b:if>
    </div>
    </div>
    </b:loop>
    <data:adEnd/>
    </div>

    ReplyDelete
  17. Awesome! Worked perfectly! You ROCK! Thanks for the quick reply!

    ReplyDelete
  18. @Noisy Quiet: Glad you think so, enjoy your stay here. Cheers.

    ReplyDelete
  19. Thanks for this.

    One follow up to some previous questions about still wanting to display the date - rather than the time.

    Instead of switching off the third box from the top in your optional step, change the format of the time stamp - found next to the third box.

    Blogger has options for date and time, or simply the date. Hope that helps.

    ReplyDelete
  20. @oldwaver: Thanks for the useful input. Cheers.

    ReplyDelete
  21. Thanks for you tutorial. Done it :)

    ReplyDelete
  22. @Rinah: That's great. Happy to help, as always.

    Cheers and God bless.

    ReplyDelete
  23. @My anxious life:

    Glad you find it helpful. Cheers.

    ReplyDelete
  24. Hi,

    I am very new to blogs and computers so please don't be upset if i ask a silly question.

    I want to remove date, time, both from all my posts.

    How do i do that?

    Thank you.

    ReplyDelete
  25. @Eftene: That's easy. Go to Dashboard - Design - Page Elements - Blog Post - Edit - Uncheck the date and time column - Save.

    Cheers.

    ReplyDelete
  26. this is great, thanks so much man.

    can i ask a question though? after i insert the code, is there someway to adjust the spacing to reduce the gap between the new date header (timestamp) and the post title?

    my blog isn't live yet, but i'll open up the work in progress so you can see what i mean.

    distantthings.com

    ReplyDelete
  27. @Chris: That shouldn't be a problem. Refer to this tutorial:

    Remove Space between Gadgets in Blogger Sidebar

    Cheers.

    ReplyDelete
  28. thanks for getting back to me so quickly, i really appreciate it. it's given me a lot of trouble, but i finally figured it out. had to enter the following in CSS:

    .date-posts {
    margin-top: -1em;
    }

    your blog is fantastic. i've learned so much in just a few days, almost all of it from your blog. and i took your advice and downloaded firebug. amazing.

    keep it up man, once i get my links page up, i will be sure to give you link up.

    thanks again, chris

    ReplyDelete
  29. @Chris: Look at you, speaking CSS and stuffs. At this rate you're gonna make yourself an expert in no time. Cheers mate.

    ReplyDelete
  30. I am trying to do this for my blogspot blog. I followed the directions exactly but it wont save due to this:

    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 "div" must be terminated by the matching end-tag "


    Not sure what to do? I really want to separate my blog posts each day! Any help would be appreciated!

    ReplyDelete
  31. @Jenny: You will see that warning if you've mistakenly added/deleted an extra line or two. Try again the tutorial, and make sure you're deleting/adding the right number of lines. Refer to the screenshots for guidance.

    Cheers.

    ReplyDelete
  32. HI, thanks for this post , i have this problem when trying to upload the xml file to blogger :

    We were unable to save your template

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


    BTW : I used dreamweaver cs5 to edit the file .

    thanks

    ReplyDelete
  33. @Alienbv: Try changing the code from the browser itself. You might have cut an extra line or two.

    Cheers.

    ReplyDelete
  34. @We are All.One: Thanks mate. Cheers!

    ReplyDelete
  35. This is awesome ! I love your site --

    Is there absolutely no other workaround for time stamp - My blog posts really require me to show when the articles are posted due to the nature of the articles - is there are widget i can add to take care of the same (after implementing your technique)

    ReplyDelete
  36. @Vanquish: It can be done, with Javascript and all. Unlike Javascript, CSS and HTML are relatively easier to learn with no formal education. That's why you don't see much tweaks involving Javascript in this website. However, I promise I'll give it a try. "Show Date and Timestamp for each blogger post" - that's gonna be my assignment for this weekend.

    ReplyDelete
  37. You are an absolute saviour . Will be waiting for your reply !

    ReplyDelete
  38. @Vanquish: I've solved. Both timestamp and date can be shown in that new tweak. It's just a matter of writing a post and making it pretty. The post should be up sometime by this weekend, stay tuned :)

    ReplyDelete
  39. Thank you ! Another request (sorry for bombarding you with them) - How do we highlight the selected tab if you have created them using the HTML/JavaScript gadget -

    I see an answer here but it is not working for me - can you help me out

    http://www.google.com/support/forum/p/blogger/thread?tid=22d726c6ad5a972b&hl=en

    ReplyDelete
  40. @Vanqush: For questions that is not relevant to this post, get in touch with me via the contact form. I'd answer you if it was something short, but it isn't. Do include the current content of your HTML/Javascript gadget in the contact form. BTW, the link above discusses above modifying Linklist gadget to have the 'selected tab' feature.

    ReplyDelete
  41. Hi, YoboY

    How to remove this date header under post title?

    ReplyDelete
  42. @Simon: It depends to your template. For most templates, you can do so by going to Dashboard - Design - Page Elements - Blog Posts - Edit - Uncheck the first box under Post Page Option (the one next to the date option) - Save.

    Cheers.

    ReplyDelete
  43. Fantastic tutorial! I'm just starting out with Blogger, and I followed your instructions along with those you gave to Raindropsoup to get separate posts (i.e not grouped together by days), dates on each, but no dates on static pages.

    My only remaining problem is that on my static pages, I still have the "underline" for the date, even though there is no date header. Any idea what I'd have to add to the extra code you gave Raindropsoup to remove this too? (I'm based on the Awesome Inc. template, by the way)

    ReplyDelete
  44. @Anon: What's your blog's address? Have you tried the new tutorial instead?

    Show Date and Timestamp for Each Blogger Post

    ReplyDelete
  45. You ROCK! A little while back I made a separate "page" just for my posts labelled "reviews," and I dated them all 1/1/00 so they wouldn't go out in my RSS. I looked everywhere for a way to get the false dates not to show on those posts only, but since my page wasn't really a page (not a static one, anyway), the easy fixes didn't work for me.

    I tried a million CSS and HTML hacks before finding your tutorial, so I was super glad yours worked. FINALLY! You made it so easy, and you also fixed how my 'reviews' posts were all showing up in the same block because they all had the same date. You are hereby my favorite transformer. THANK YOU!!!

    ReplyDelete
  46. Okay, I've hit a snag. I removed the date as you described above, hoping just to see the timestamp at the bottom. I have it checked the box (3rd one down) in my page elements-->blog posts (edit)-->main page options, but it still doesn't show up on any of the posts... I am using Josh Peterson's Simple template. Your help is appreciated. :) --Christie
    www.hagermans.blogspot.com

    ReplyDelete
  47. @Ken: This is an old tutorial. I have since modified the tutorial to include the timestamp as well. Try the new tutorial here:

    Show Date and Timestamp for Each Blogger Post

    ReplyDelete
  48. thanks for this tuts. am going to try it and see if \it works for me

    ReplyDelete
  49. @hotnigerianews: Good luck. Cheers.

    ReplyDelete
  50. Hi, thanks for this post. Your site is a treasure of information.

    I have a problem because of which I landed on this page. The atom feed on my blog is displaying the posts in the order of their publishing dates. So far so good, but it is displaying the last edited date beside each post feed instead of published date. This is happening in IE and Firefox, but there's no problem with Safari. It seems some browsers display last edited date from the raw feed xml file. I want readers using IE and Firefox also to see the published date for each post. Only thing I can think of is to change the last update date from xml file. Is it possible by anyway? Is there any work around for this problem? Any suggestion would be greatly helpful to me. Thanks

    ReplyDelete
    Replies
    1. I'm sorry it took so long to publish your comment. Somehow it landed on my spam folder. In any case, I'm not exactly sure why your feed is showing the wrong dates. I'd advice you to start a discussion in the help forum, see if they can help you:

      Delete
  51. Thank you so much! I was able to change my blog on short notice!! You really helped me out there. Too me forever to find the right code, though. There's a near-replica earlier on in the HTML.

    Thanks again!
    :)

    ReplyDelete
    Replies
    1. Hi TrinnBloom. I have improvised this tweak to include timestamp as well. The link is at the very top paragraph on this page (under the 'Update' box). Take a look at that if you wanna bring back your timestamp :)

      Delete
  52. Thank you!!! I was struggling with that :)

    ReplyDelete
    Replies
    1. There's an updated version of the tutorial that doesn't require you to sacrifice your timestamp. Link below, if you're interested

      Show date and timestamp for each blogger post

      Delete
  53. I was so ecxited when I found this blog because I am really interested in making my blog look and do things that do not look possible from just looking at blogger. I think I saw one of your tutorials that you were looking for more things to write tutorials on. I have a few suggestions thought I dont know if you have already written about them because you have so many tutorials. Anyway, my suggestion are:
    1. How to give a design to your comments box and how to ask more info from the reader when writting a comment (info like, name, website, email...) this is so that readers dont have to have an account to show their info, becuase on blogger you either leave a message with an account or you leave one that is anonimous.
    2. I saw your tutorial on how to do social floating icons. I was wondering if you could have icons like these on your header.
    3. I attempted to make a template for my blogger but I was unable to because I actually just made a website template and that doea not work on blogger. So I am stuck with a simple blogger template and I wanted to know if it was possible to change the date line of the post. In this template I have a date line that is highlitted gray and in all caps. How can I change this?

    Those are all of my suggestions for know. Thanks for all of the amazing help with blogger!

    ReplyDelete
    Replies
    1. Hi Laiana, Agnes and Adriana (which one of you wrote this comment anyways?),

      Appreciate all your suggestions! Here's a quick reply to each one them.

      1) I've published several comment related posts before, related to designed the comment box. A few more is coming up. As for custom made query to ask for additional information, I'm afraid that'll be easier done with a third party comment system, like Disqus.

      2) You could. Are you referring to floating icons or fixed ones? It's just a matter of positioning them. Write to me if you're looking for a way to do this.

      3) Easy peasy. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .date-header span{
      color: black !important;
      background: transparent !important;
      text-transform: capitalize;
      }

      Happy blogging!

      Delete
  54. Works like a charm thanks :)

    ReplyDelete
  55. Our template for blogger is using "Simple" and there was no date on each post. Then we saw your update method and changed the template code with your suggestion but nothing shown still. Any suggestion how to approach this? we like the readers to see the date on each post.

    Thanks for the cool site. :)

    connectingera(dot)com

    Is that possible to implemented the Ribbon Date even not in dynamic view?

    Any suggestion is a plus.

    ReplyDelete
    Replies
    1. Hi there,

      Check if your template is set to show dates in your settings. Go to Dashboard - Layout - Blog posts - Edit - make sure the first box under 'Post Page Options' is checked. If you still don't see your date, go to Dashboard - Template - Backup/Restore - Download Full Template (to backup your current template). Next, go to Dashboard - Template - Edit HTML - Proceed - Restore widget template to default'..

      As for the date ribbon, there are lots of tutorials around on how you can set your date to appear in ribbons, just Google them :)

      All the best :)

      Delete
  56. Really thanks, Helped me alot

    ReplyDelete
  57. hello there and thanks on your information - I’ve definitely picked up something new from right here.

    ReplyDelete
    Replies
    1. Hi there,

      Glad to hear that. Hope you're enyoing your stay here.

      Cheers :)

      Delete
  58. It's a great information and thanks to you

    ReplyDelete
    Replies
    1. how to implement the same thing for custom blogger template.

      Delete
    2. This is something you probably want to run by the designer of the template, as each custom template has a different structure. I'm afraid there isn't one generic answer.

      Delete
  59. thanx it was great help for my blog
    http://linuxmasterlevel0.blogspot.in/

    ReplyDelete
  60. hi Yoga,

    Please can you help me a bit.

    I am failing since long
    I am using a 3rd party template
    Only the timestamp is coming and not the date
    I have tried both your tweaks,but in vain :(

    http://www.ilovetrolls(DOT)org/2013/07/age-of-empires-2-memes.html

    I have hunted CSS as well to find out any display:none, but there's nothing like that :(

    I went to layout and choosed different layouts of date,but everytime even after choosing only the date stamp,only the time appears.
    please help.
    thanks a ton

    ReplyDelete
    Replies
    1. Hello there,

      Have you checked with the original template if it is designed to show both timestamp and date?

      Delete
  61. i have tweaked the template a lot....in the original template as well,only timestamp was there........is there code by which i can include?...earlier i presumed that the above code would include the provision of inclusion of the datestamp

    ReplyDelete
    Replies
    1. Hello Shrenuj,

      If the original template does not have the feature, perhaps it was never added to the structure. Enabling it might not be as simple as adding back some code, as the whole structure of the template will have to be re-calibrated. Then again, sometimes it's just a simple fix. In any case, it'll take lengthy amount of time to find this out, and the best person you should take this up with is the creator of template.

      The code I've posted above is for Blogger's built-in template only - as there are thousands of third party templates out there with varying degree of structures, it's just impossible to create a tweak that will suit them all.

      Delete
  62. THANK YOU SO MUCH! I downloaded an XML template over a year ago that I love but the timestamp for my posts has always been the time only (with no reference to date anywhere). I played with the code for months before giving up, but your post solved it for me. Thank you!

    ReplyDelete
  63. Thank you for this! it really helped me!

    ReplyDelete
  64. This is my go-to method but today it didn't work.


    I did this on a 3rd party template and all my dates got replaced with a timestamp.

    This is my solution to fix it.. maybe it'll work for some others?


    Replace this short section-


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


    With this:

    <b:if cond='data:post.dateHeader'>
    <script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    <b:else/>
    <h2 class='date-header'>
    <script>document.writeundefinedultimaFecha);</script>
    </h2>
    </b:if>\




    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.