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:

Page Elements Tags for Layouts

The section of a Layouts template is made up primarily of sections and widgets. Sections mark out areas of your page, such as the sidebar, footer, etc. A widget is an individual page element such as a picture, a blogroll, or anything else you can add from the Page Elements tab. You can include any HTML you like around the sections in your template.
Each section in your template has an opening and a closing tag, looking something like this:


A tag can have the following attributes:

• id - (Required) A unique name, with letters and numbers only.
• class - (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.' If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.
• maxwidgets - (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
• showaddelement - (Optional) Can be 'yes' or 'no,' with 'yes' as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section.
• growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

A section can contain widgets; it can't contain other sections or other code. If you need to insert extra code between or around certain widgets within a section, you'll need to split the section into two or more new sections.

Can I edit the HTML of my blog's layout?

Yes, just go to the >Layout tab and click the Edit HTML sub-tab. Keep in mind that Blogger's Layouts feature makes it easy for anyone to customize the look of their blog with little or no technical knowledge.
The first thing on the Edit HTML page is an option to download a copy of your template to a text file on your hard drive. We highly recommend doing this if you've made any interesting customizations to your design at all. Then, if you make a mistake editing your template, or if you just don't like the way it comes out, you can revert easily by uploading the same file again.
Next comes the actual code for your template. You'll notice it looks somewhat like regular HTML and CSS, but also includes lots of custom tags that make it compatible with our drag-and-drop layout editor, and with the font and color picker. If you want to make extensive changes to your code, you'll want to read up on these tags first:

• Page Element Tags
• Fonts and Colors Tags

You'll also see an option to 'Expand Widget Templates.' By default, each page element is shown in the code as a one-line placeholder, whose options can be set in the graphical interface on the Page Elements tab. Turning this option on will show the complete data and template for each element. The code is simpler the first way, but you have more control the second way, so use whichever option you prefer. Learn more by reading this help article:

• Widget Template Tags

Below the code, you'll see three buttons for Clear Edits, Preview, and Save Template, which do what you'd expect them to.
There are also two links referring to your 'classic template.' If you converted your blog from the older style of Blogger templates to the new Layouts version, then your classic template is the last template you used in the old system, with all your customizations. If your blog was created on the new system and has always used Layouts, then your classic template is a default, classic version of the original design you chose when you created the blog, without any customizations. The View link will show you the code, in case you just want to check up on something, or copy a piece of it for your new design. The Revert link will erase all the customizations you made in the Layouts feature and set your blog to use the old-style Blogger template again. Note that you won't be able to use the graphical Layouts interface in this mode (though you can convert back to Layouts again later).



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