How to Add A Comment Count Bubble To Blogger Post Titles

If you want to add a comment or speech bubble to your Blogger blog, then follow the next steps below:

Step 1. Log in to your Blogger Dashboard > go to Template > click the Edit HTML button

comment bubble, speech bubbles, blogger comment bubble

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box

Step 3. Find the following tag in your template:

]]></b:skin>

Note: before anything, you need to click on the small arrow next to it and after the code has expanded, search for the ]]></b:skin> tag again

Step 4. Just above ]]></b:skin> add the following CSS styling:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_RGGbMgKqbQBCRx17dzdCO-7I0Nyt4D2fUnFhEYTCc2Q3UO36vB6035BqfQbATlyC40UlCWRG6I5nGoTH0HeGEiC69o8stBEIweBqtfr3TEgMb9lwBEJInA-KqzZyq12EcuoQSDBy9_dM/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 image you like and select "Copy Image Address/Location", then replace the blue code from step 4 with the address you just copied.

bubble comment count, bubble blogger posts