Showing posts with label peek. Show all posts
Showing posts with label peek. Show all posts

Tuesday, September 14, 2010

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: