Ez.Blgr.Trix

Installing this Blogger hack to add a comment counter button only takes a few minutes. The changes needed to add the comment bubble to Blogger while not difficult do involve adding a small snippet of code to your Blogger template in two places. 

• Log in to Blogger and the blog you wish to apply these changes to
• Select Design > Edit HTML
• Click on Download Full Template to back up your template before you make any changes
• Check the Expand Widget Templates box
• In the CSS Styling section of your Blogger template and just before the ]]></b:skin>

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

• Now find the following block of code using CTRL key + 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>

• Copy this code block:

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

• Insert the above on the code before it. Your code now must be alike with the ones below.

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

• Save template and then view blog to admire your new comment counter badge.

If you prefer you can replace the button image I have provided with your own image. You can find other buttons easily enough by doing a Google search with a term like "speech button icons". Upload your button to a hosting service such as Photobucket and change the URL address of the image in the CSS styling section. The following example will render a smaller blue button. Note I have reduced the font size to accommodate the change. You may need to play around with the settings to get the font sizing right for your image.

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

If you want your comment counter to be left aligned instead of right you will need to change the CSS styling from float:right; to float:left;