Peek-a-boo comments

Note: 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

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

CSS

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

Javascript

Add the following code to your template, between the tags:

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 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:

   
   <$BlogItemCommentCount$> comments

First, we need to remove the 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:

   
   <$BlogItemCommentCount$> comments

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:

   
       [ ... lots of comment code here ... ]
   

Here we want to remove the 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:

   
       [ ... lots of comment code here ... ]
   

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.



http://www.google.com/support/blogger

Related Posts :