How To Add A Comment Count Bubble To Blogger Post Title

Having a comment count bubble to each blogger post titles makes your blog more attractive. This improves not only your comments count but also allows your visitors to see what are the most popular posts on your blog. If a post has more comments then it will show the popularity of posts to your readers and visitors. So let's start adding this feature to your blog post titles by displaying the total count of the comments for your Blogger posts:

Step 1.

 If you are using the old Blogger interface:

• Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

• Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Find (CTRL + F) the following piece of code in your template:

]]></b:skin>

Step 3. Place this code just above ]]></b:skin>:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHwwpg5BS-aRDATbkIwb9OVLrUnyZFWYyN0OSftvQFvsZgtd6LV4wTd5eeO6A4pNDTqdB5-2qPyQca7lUoOF1KeRYx-57v7xUD7NSkdKXlHB8Bc_3EY06-jKzYQosX9-3OiaHguStDKRQ/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Step 4. Now find the below 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 5. 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 6. Now Preview your template and if everything is ok, Save the Template.

You can choose one of these images below (Right click on the desired image and select "Copy Image Address/Location" - paste it instead of the red code from step 3)


Enjoy (: