So let's start adding it:
Step 1. Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed)
Step 2. Select "Expand Widget Template" (make a backup)
Step 3. Find - using CTRL + F - the following piece of code in your template:
]]></b:skin>
Step 4. Add the below code just above ]]></b:skin>:
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCSv0UiH_3zadeHNGT0iIjiHgeTTEc5iJ4Z6JrCzkjo7_czPDQsO4EdwcgETOiiVZX1G1r9z47EqpllEW2VI5WidNnsv1mRChQpAyzqzUUTO_Bay97oCIVLeV-XulQafMPavigh_zjfji/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
Step 5. Now find this code:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
Note: If you can't find it, search this code instead:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
Step 6. And add this code immediately after it:
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>
Note:
- to change the color of the comments number, replace #ffffff with the hex value of your color;
- to change the font size, increase/decrease the 18px value;
Step 7. Preview your template and if everything is ok, click on Save Template.
Comment Bubbles
You can choose one of the images below - right click on the desired image and select "Copy Image Address/Location", then replace the red code from step 3 with the address you just copied.
That's it! Enjoy (:
You might also be interested in reading this tutorial: