Add Comment Count Bubble with Post Title Blogger

So do you want to show the number of comments you have received on any post and even allow anyone to click that and then head to comment form right away, well you can do that by just using this easy workaround. Now you can add that comment counts bubble right on the side of post title. So now anyone can see how many exact comments you have on your website and as soon as they click that they will see the comment form so that can even comment on your post passing you positive reviews about your article.

So now lets see how you can get this bubble aligned right to your post title, so check below steps and apply it to your blog.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

   .comment-count-bubble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqSAbImvMlRu5unHbvNnev5hxd1-24LTZchy4aiNC5c6gNMVAoH-KnePFDAkLbUTaa9ZGJBjwWgkgzJKH57fL9rEgZ4TYjSxJIE0XZheXV2n2n4eUrGpoR-OUKfO5dMMCaK-I2Tf84f4tc/s1600/comment+bubble2.png);background-repeat:no-repeat;float:right;font-size:18px;height:48px;margin-right:2px;margin-top:-15px;position:absolute;text-align:center;width:48px}

3. Now again search for <h3 class='post-title entry-title'> if you do not find anything try changing the h3 to h2 and paste below code right below it.

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

4. So just check above image how the code is placed and now if you have done the whole process of CSS and HTML pasting just hit Save Template.
5. Just refresh your blog and see if its working or no. Now you can obviously make some changes to the code like changing the background bubble image, just change the blue line in above CSS code and it will work fine.