Peek-a-boo comments - Blogger help, tips and hacks

Peek-a-boo comments

This article assumes you are using a classic template (without the Layouts features).
By default, a post's comments are only displayed on the post page for that post. You can show them on your main or archive pages as well, of course, but that could get crowded. A better option might be to have a link to click on your main or archive page that will make the comments appear on that page, without having to go to the post page. Something like this:

Example Post

I'm not going to actually type a whole lot here. You can pretend it's long and interesting, though, if that would make you feel better. Just click the comment link here.
# posted by Graham @ 5:15 pm 2 comments


  • Dude, you write the best posts. I always love reading your blog.
    by Graham's Friend @ 6:16 pm
  • I don't know. I think they're pretty bad, really.
    by Graham's Enemy @ 7:17 pm

Similar to a previous'>">previous hack , there are three parts to this feature: CSS, Javascript, and of course, Blogger template tags. So let's go through it step by step.


This is the simplest part. We need a couple classes that either hide comments or show comments, so you can just paste these two lines into your style sheet:

.commenthidden {display:none}
.commentshown {display:inline}

Your style sheet is usually near the top of your template, between the <style> and </style> tags. If you have your style sheet in a separate file, you'll just add these lines to that file instead of to your template.


Add the following code to your template, between the <head></head> tags:

<script type="text/Javascript"> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>

This is the function that we'll use below to show or hide the comments for a post. We just give it the ID number of a particular post, and it changes the associated comments from one CSS style to another.

Blogger Tags

In the template, we're going to look between the <Blogger> </Blogger> tags to see the code that prints out each post and its comments. First, we'll find the part that links to the comments, which will look a bit like this:

<MainOrArchivePage> <BlogItemCommentsEnabled> <a href="<$BlogItemPermalinkURL$>#comments"> <$BlogItemCommentCount$> comments</a> </BlogItemCommentsEnabled> </MainOrArchivePage>

First, we need to remove the <MainOrArchivePage> tags that surround this section, since we'll be putting the comments on all pages. Then we need to change the link so that instead of taking us to a separate page, it uses our "togglecomments" javascript function, like this:

<BlogItemCommentsEnabled> <a href="javascript:togglecomments('c<$BlogItemNumber$>')"> <$BlogItemCommentCount$> comments</a> </BlogItemCommentsEnabled>

Now look a little farther down the template code and you'll find a large section of code full of comment tags. It will probably have Item Page and Comments Enabled tags around it, like this:

<ItemPage> <BlogItemCommentsEnabled> [ ... lots of comment code here ... ] </BlogItemCommentsEnabled> </ItemPage>

Here we want to remove the <ItemPage> tags so that the comments will be available on all pages. Then we'll replace them with a special span tag, that controls whether they're hidden or not. By default, we'll start them off hidden. Here's what the new code looks like:

<span class="commenthidden" id="c<$BlogItemNumber$>"> <BlogItemCommentsEnabled> [ ... lots of comment code here ... ] </BlogItemCommentsEnabled> </span>

Once you've got everything in your template, just save the changes and republish. The new format will automatically be applied to all of your posts, without having to change anything else.

Did you like this article ?
Subscribe to my RSS feed and get more blogging tips, Plus a lot more great advice to help your blog.

Related Posts by Categories

Widget by John
  1. 0 comments: Responses to “ Peek-a-boo comments ”


 Subscribe in a reader

Latest Free Blogger Templates
Template 01 Template - 02 see more templates
demo - 01 demo - 02
Click here for Demo Click here for Demo How to Installed Tips
Download the Temp01 Download the Temp-2  

Blogger Help: Recent Comments


 Subscribe to Bloggers Help via RSS
Add to Technorati Favorites