How to Add Beautiful Bubble Comment Counter to Blogger Blog

Comments are always seen as an important factor in the success of your blog. Users normally comments on your blog to appreciate author of that post, or to ask questions. One way to judge the popularity of the post is to see the number of comments post has received and for that you need to put comment counter on your blogger blog. In this article I will be explaining you how to add beautiful bubble comment counter to blogger blog.

How to Add Beautiful Bubble Comment Counter to Blogger Blog

Step 1

Login to your blogger blog and select the blog from your blog dashboard. Now select template >> edit html.

Step 2

Click in the template code area and press ctlr + F5 to open search box and type the following code in the search box.

]]></b:skin>

Step 3

Now expand the code by clicking the arrow next to it and search for the above code again, simply add the below code above ]]></b:skin>

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://goo.gl/92MxG2);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Step 4

Once the above code is added to the template, search for the code below

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

If due to some reason you are unable to find the above stated line of code look for the code written below.

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

Step 5

Now add the following code immediately after this code.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #000000; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

Customizing comment counter 

You can change the #ffffff hex color code to the choice of your color or color which suits to your template. Similarly, change 18px font size to your preferred font size.

I have provided a few beautiful images that you can add to your blogger bubble comment counter, just replace the URL with the above stated URL in Step 3 that is highlighted in pink color.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJl4iKYujYq4ob8NcMWQlxGO4CdZh6W5SihJZnt6R4AsKC8yrvW5YbV1TszMpyFprBDimSxhbzbh0tMSozfRz1NiM1SDgXf-mxA6DFz5jIUu8fXExn_JwSUEAB5wqif2la7dp6Edo9hspd/s1600/blue+bubbe+comment+counter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbIKk2SPpuhFGU7PhYLSRaKfticwPt1yGiJ3i1PDy8TO6rUFzrs3k3m-daV-uEgR5KclSQE-0OzY1oMoL1ptxOuM4YNtBV0BHJBvB6nh6vSTVhJBR0N306VpsBCHB94rMSQhfiBqkSIZ5W/s1600/pink+comment.png

I hope you have liked our effort of providing a beautiful bubble comment counter to blog post title. Do write to us in the comments section.