Aug 15, 2012

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

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>
</b:if>
</b:if>
</b:if>
</span>


Our modified code

Instead of this part:


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


You could do:


<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)