How to Add Bubble Comment Count in Post Titles

If your are blogging on blogger platform then you already know that by default number of comments are displayed at the bottom of the post. As a result these are not easily noticeable to the visitors. As we all know that the numbers of comments is one of the parameter by which you can get idea of a post popularity. But as the comment count in blogger display at the bottom of the post, the visitors only see the comment count when they reach at the end of the post. So, the better idea is showing the comment count at top of the post.

Related Posts:Important Posts on Blogger Comments

If you show the comment counter in your posts title then it will be easily noticeable to the visitors. And also inspire to comment on the posts. In this post I am gonna show a trick by which you can add comment counter in the post titles. As a result the comment count will be displayed with post titles. If the visitors click on the comment counter then they will be jump to comment section. Let's do the trick...

Adding Comment Counter in Post Title:

First Sign into your Blogger Account and go to Dashboard.
Then click on Template and then click on Edit HTML button. You will land on the HTML page.
Here in the HTML page find class='post-title entry-title' line (You will find this line for two times) and Paste the following code just Below the both lines.

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

Now again find ]]></b:skin> and Paste the following code just Above it.

.comment-count {
float : right;
width : 48px;
height : 48px;
background : url( IMAGE URL );
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Customization:

Click right mouse button on anyone of the below image that you want to as the comment counter background and click Copy Image URL.

Then in the above code Replace IMAGE URL with your Image URL.