Add Auto Bubble Comment Count In Blogger Post Title

Some visitor do not understand the topic or their problem not solved by your description so they ask for help by comment.It is very good way to communicate and to help each other.today we will learn how to add bubble comment count.It show the number of comment on your post within beautiful bubble.It looks very pretty.It can see it beside post title.

How to add bubble comment count in blogger

Before adding i tell you that i will introduce you two style of this widget.lets start the process

First you have to login to blogger account

Now go to template and edit Html

click inside code area and press ctrl+f you can see search box appear.

Find this code

]]></b:skin>


Add the below code above ]]></b:skin>

For green

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

For Blue

.comment-bubble { float : right; width : 48px; height : 48px; background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQMgfudqc2LSQkYD6Hf6E6Wv3Er0P6mzLiYxHCvqoPnM6rThirO5-EKiOl1lJ-9JOR3O3ZXpYGIli-31F-d7awz7LsGMnk9QypklbiEZyjded-qnqTCbRHeC38ZvyS8bwH-_hR6W8AddjT/s1600/bubble+comment.png); background-repeat: no-repeat; font-size : 18px; margin-top : -15px; margin-right : 2px; text-align : center; }

Now find this code

<b:if cond='data:post.title'> <h3 class='post-title entry-title'>

If not found try to find this

<b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'>

After it paste below code

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

Save your template your work has been done.

Note:To change the color of the comments number, replace #ffffff with your hex color code
To change the font size, increase/decrease the 18px value according to your requirement.