How To Customize Blogger Comment Link

We shared many blogger customization tips and tricks here in this blog. Today we will discuss about customizing Blogger comment link. You can change the text and look of the blogger comment link that appears below every posts on blogger homepage. I am talking about the comment link that has been shown below in the snapshot. 

The customization will give your blog a professional look. Backup your template before applying any customization. Here goes the complete step for customizing the blogger comment link:-

1) Log in to Blogger account.

2) Go to your Blogger Dashboard > Template >Edit HTML and tick the "Expand Widget Templates" checkbox.

3) Now press (CTRL+F) to find the piece of code (marked in red):

<span class='post-comment-link'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <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> </b:if> </span>

Replace this code marked in red with the codes below:-

<b:if cond='data:post.numComments == 0'> Be the first to reply! <b:else/> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/> so far. What's your opinion? <b:else/> <data:post.numComments/> <data:commentLabelPlural/> so far. What's your opinion? </b:if> </b:if>

4) Preview and save the template.


You can also add a comment icon beside the comment link.

Just add small code that is given below:

<img src='URL' style='border:0px'/>

(Replace URL with the actual URL of the icon image) 

So that the final code after adding comment icon will be as like given below:

<span class='post-comment-link'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <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 == 0'> Be the first to reply! <b:else/> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/> so far. What's your opinion?<b:else/> <data:post.numComments/> <data:commentLabelPlural/> so far. What are your thoughts? </b:if> </b:if> </a><img src='URL' style='border:0px'/> </b:if> </b:if> </span>