Adding bubble comment in blogger

Well its pretty clear in the title that this tutorial helps you on adding a comment count bubble next to your blogger post titles as you can see the live demo of it on the homepage of my blog. Showing comments count on your blogger blog posts really helps you in building more number of commentators and active community on your blog. So nothing is left to talk about blogger comment section. Let's jump to the tutorial on adding bubble comment count to blogger post titles.

DEMO

 How to add this to the blogger:

1. Go to blogger dashboard --> Template --> Edit Html(Tick expand widget template option).

2. Search(Ctrl+F) for ]]></b:skin> and paste the following peace of code just above it.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://2.bp.blogspot.com/-7FFIKA34Kvw/T4x9E0RmA0I/
AAAAAAAAALI/03AG305CesI/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Bubble icon choose

I have listed some of the nice looking bubble icons below. right click on your desired icon and click on copy image URL and replace the above highlighted Url with your copied Url.

Bubble Comment count script

3. Now find for this code

 class='post-title entry-title'

4. Add the following peace of code just below it.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

5. Save your Template and view your blog.

For further assistance kindly leave your question in the comment section below and I would be pleased to help you on it.