"# comments" link in index page hack

I changed this blog's commenting to use full page comment form. With embedded form there are problems with cookies across different domains, I could fix them but my readers might not. So I decided to use the only good option: full page. (some might also like popup window, I don't)

With embedded form commenting, when you view articles in index, suppose you have 5 comments in a post, then there is a link 5 comments which opens the post and jumps to comments section (#comments). This is nice.

But with full page comment form the link 5 comments don't open the post and comments, but the commenting page instead. I think it is better to open the post and comments, and there user can click Post Comment link if he wants to post a comment. When there are 0 comments, the link still may open the commenting page directly.

This can be accomplished quite easily. Open you templates html for editing, click Expand Widget Templates. Find code that looks like:

            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>

That code should be inside <b:includable id='post' var='post'> block (there's another one for mobile devices, block <b:includable id='mobile-post' var='post'>, that one I didn't touch, you can, if you want). Replace that previous code by:

Data provided by Pastebin.com - Download Raw

We insert three adjacent things into original code, highlighted red, old code is black (no need to do anything about this snipped, this is just for clarification):

    <b:if cond='data:post.allowComments'>
1.   <b:if cond='data:post.numComments == 0'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> <data:top.commentLabelPlural/></a>
     <b:else/>
2.    <a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
3.   </b:if>
    </b:if>

Now it works the way I want. I'll install this hack on this blog, except on this particular post, so you can test it – this post works like it was before, all others work like this hack. Instructions are not too detailed, so you should know your way around before trying to apply to your blog.

References:
Blogger Help: How do I leave comments on a blog?