Recent posts + comments in Blogger

blogger_recent_comments
One of the disadvantages of using Blogger is that by default, you don’t have categories and recent comments on your blog. There is a trick to put recent comments on this Blogger help page. It involves introducing a new <Blogger> ... </Blogger> loop in the blog template. A nice trick, but I don’t like the fact that they only show the comment dates.

So I developed the idea a bit further: on the main and archive pages of my blog, you now see the normal “Recent Posts” in the sidebar, but the posts that have comments also have those listed (see image at the right). On the individual post pages, I have the normal list of recent posts. I put each comment in a div with a height of 25 pixels and with overflow: auto (defined in the CSS file) so that long comments don’t take too much space. The layout of the thing (e.g. each comment starts with a clickable “>”) is easy to adapt.

This is the Blogger template code (in the standard templates, put this instead of the existing code that is much like the part here between the <ItemPage> ... </ItemPage> tags). Feel free to use it if you want to.


<ItemPage>
<h2 class="sidebar-title">Previous posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>" mce_href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
</ItemPage>
<MainOrArchivePage>
<h2 class="sidebar-title">Previous posts</h2>
<ul>
<Blogger>
<li><a href="<$BlogItemPermalinkURL$>" mce_href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a>
<BlogItemCommentsEnabled>
<BlogItemComments>
<div class="recent_comment">
<a href="<$BlogCommentPermalinkURL$>" mce_href="<$BlogCommentPermalinkURL$>">></a> <$BlogCommentBody$>
</div>
</BlogItemComments>
</BlogItemCommentsEnabled>
</li>
</Blogger>
</ul>
</MainOrArchivePage>

You will need a CSS class (in your CSS file, or in the first part of your Blogger template) with something like the following code:

.recent_comment  { 
   overflow: auto; 
   border-bottom: 1px #999 dashed; 
   font-size: .8em; 
   height: 25px; 
}
Tagged on: , , ,

6 thoughts on “Recent posts + comments in Blogger

  1. Chris Dollis

    That was the ultimate fantastic tip.

    Thank you.

    I hated the fact that all my recent comments were a disorganized, unordered mess… and you made them slick and beautiful – way better than I had planned.

  2. t-hype

    It would be nice to have a simple “Commenter’s Name” on “Title of Post” like it seems every other non-Blogger service is able to do…

  3. Stu Mark

    I tried to make the additions you point out, but it just gives me an ever narrowing display of posts. Is there any way I could email you my template and ask you to tell me where to place the class and the additional comment code? I obviously don’t have it in the right spot, but maybe I’m missing something else?

Leave a Reply

Your email address will not be published. Required fields are marked *