Inline comments for classic Blogger templates

After posting the hack for inline comments in Blogger layouts templates, I was asked if the same is also possible for classic html based templates. The answer is "yes" it is certainly possible! So for the benefit of those using classic Blogger templates (non-layouts) I will explain how to edit your template to feature inline comments on post pages.

The hack for inline comments in classic templates is perhaps a little simpler than for layouts templates, and is very easy to do. Also it is possible to preview the changes with classic templates (including seeing your post pages) so that you can be sure the inline comments act correctly before saving your template.

Here is my step by step guide:

• First of all, make a back-up of your template by copying the whole of your existing template into a text editor. This is just a precaution in case you make a mistake and need to restore your template at a later point.


• Next, go to the settings section of your Blogger dashboard and click on "Comments". You need to choose "Show comments in a pop-up window" for this hack to work effectively. Save this setting, then go to "Formatting". Choose "Enable post pages" if you have not already done so, then save this setting too.


• Next open the "Edit template" section and search for this section in the template code:
  

  <p class="post-footer">
  
  <em><$I18NPostedByAuthorNickname$> <$I18NAtTimeWithPermalink$></em>
  
  <MainOrArchivePage><BlogItemCommentsEnabled>
  
  
  
  <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
  
  
  
  </BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
  
  <a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
  
  </BlogItemBacklinksEnabled>
  
  </MainOrArchivePage> <$BlogItemControl$>
  
  </p>

  
  Change the line highlighted in red to this instead:
  

  <a class="comment-link" href="<$BlogItemPermalinkUrl$>#comments"><span style="text-transform:lowercase"><$I18NNumComments$></span></a>



• Next, find the comments section of your template. This may be highlighted by comments to explain what the section is for, and should look something like this:
  
  
  
  
  This section of code displays comments on post pages, and also provides the link to the comments pop-up page. We need to hide this section, rather than delete it, and also add code to display the iframe which will contain both existing comments and the "create comment" box.
  
  Take a look at the modified comments section below, and add all of the code which is highlighted in RED:
  
  


• At this point, you may want to preview your template to ensure everything looks okay. You can click on the item titles to get to the post pages and preview the inline comments too! (this is something we "layouts" users are unable to do).


• If all looks okay and the inline comments appear as they should, then save your template and enjoy your new inline comments feature!

I have tested this extensively on one of my test blogs and have found this seems to work fine in both Firefox and Internet Explorer browsers. When you view post pages in IE, you may receive a notice that you are viewing pages over a secure connection; this is because Blogger's commenting system uses a secure connection, and since you are viewing comments inside the post page, the secure connection is activated.

I hope this enables classic template users to feature inline comments in their blogs too! Please feel free to leave your comments and suggestions below.

Technorati Tags: classic+blogger | old+blogger | inline+comments