Comment Counter Button: Add To Your Blog

This blogger post is to explain how to add a comment to a blogger post.

Follow This Steps To Add

1. Logging to your blogger dashboard

2. Click Design > Edit HTML

3. Backup your template by downloading it.

4. Check The Expand Widget Templates

5. In theCSS Styling section of your Blogger template and just before the ]]></b:skin>
 You will see:

 comments-button {
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOiROqiO_JishzK5ve4SFLhcQYz-bajjvJPj_8zoNexmWobc_fERaUJyBN6oEkL6friPbHvz9iETAFhO8705wNSlqpg5eQPNCXW1F2zeKO68RdHTUSihYXmH5fJk8mAwSWwncenw-Hb1E/s200/comment-counter-bubble.png) no-repeat;
float : right;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding-top:10px;
}

6. find the following codes with CTRL F

 <b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

7. Now copy this code:

 <b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

8.  Insert the code like this

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

<b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

9. Preview before you save