How to Add A Comment Count Bubble To Blogger Post Titles

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. Therefore with this simple plugin you can still harness the power of blog performance by receiving a big number of visitors. In this tutorial let's learn the procedures of adding the comment count plugin to our blog.

As always let's get along step by step:

Step 1.
Check into you blogger account by login:

• Go to Dashboard - Design - Edit HTML - Expand Widget Template (always keep in mind to backup you blog first)

Step 2. 

By pressing (CTRL + F)  all at once, find ]]></b:skin> code in your template

Step 3. 

Place the below code just above ]]></b:skin>:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtp5YLzrTo7w6akhBbSf1_WSOJk9O7M6pI8l6E-N_rtmaKEaUkuq4h4LkL_IijZFuIi6NOoBEoEndmKjWY9PHvsaffI2201AJ7QuqXyH3rxOfnrX0DXPQCb80hhD6NNXh0xg2LhNGvl1hg/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'>

Please Note: If you can't find it, search this code below 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>

Little Changes

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

Preview your template and if everything is ok, Save the Template.

Keep in mind you can get comment bubble image by googling. After you find your desire image right-click on it and copy the url then the change the highlighted link far above 

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtp5YLzrTo7w6akhBbSf1_WSOJk9O7M6pI8l6E-N_rtmaKEaUkuq4h4LkL_IijZFuIi6NOoBEoEndmKjWY9PHvsaffI2201AJ7QuqXyH3rxOfnrX0DXPQCb80hhD6NNXh0xg2LhNGvl1hg/s1600/speech+bubble+green.png

Let me help if you get in trouble.

Share: