Tip: Making the comment link more intuitive for Blogger

We came across a comment on Google+ this morning that had us scratching our heads, mainly because we never noticed this odd behavior in Blogger, but once noticed, it really is strangely wrong.

Basically it boils down to all "index" pages in a Blogger site, that when a page has multiple posts on it, in the footer of each post it says something like "5 comments" or "no comments", but never a link that says "leave a comment". Sure, the "5 comments" or "no comments" are links to the comment form, but in terms of usability, the poster is completely correct in saying that's very weird behavior.

So we took it upon ourselves to write a fix!



The original code

Related:Tip: Make effective use the post title, URL and permalink

You can find the following code by going to the Edit HTML function under your Template page, then checking the box to "Expand Widget Templates". Please remember to backup your template first!

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
</a>

Related:Tip: Updated way to remove the Blogger Navbar

</b:if>
</b:if>
</b:if>
</span>


Our modified code

Instead of this part:

Related:Hangout on Air: Custom Picasa Album Slideshows in Blogger

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>


You could do:

Related:Create a custom Picasa slideshow in Blogger

<data:post.commentLabelFull/>, <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
Post a Comment
</a>


This would display as: 5 Comments, Post a Comment

("Post a Comment" would be the link)