Add Bubble Comments Count In Blogger Post Title

This tutorial will guide you "How To Add Bubble Comments Count In Blogger Post Title". Almost you have seen on many websites and blogs, a bubble shows total number of comments on the post. If you are new to blogging era, you always want to customize your blog template as like other pro templates. Because if your blog has fantastic look then definitely you will get loyal readers.

So let's go ahead and add a small bubble comment count in front of your blogger post area. I will show you demo for this tutorial also. With the help of this guide will add comments bubble icons to each of your blogger post titles. You have to add a simple code in your blog Template coding.

Live Demo

Steps To Add Bubble Comments Count

STEP #1: Go To Blogger Dashboard. Navigate To Layout > Edit HTML Section And A Give Tick To “Expand widget Template”.

STEP #2: Find ]]></b:skin> In Coding. Now, Copy & Paste The Below Code Just Before ]]></b:skin>

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYd_1TjbmlncBr7Pn7sKqkp5YriOFfct98zKS-YYWYLIXHggYrfJfyBgj6N72WgwsAH-DPZkIItxKVAtpR221LHhrO25HrS2iHaWfKUZIC9lpyZptNEd8VGb0HhBb0DS1ay-BtLBfvI8E/s1600/Bubble+Comments+Count+In+Blogger+Post+Title.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}

Now Find The Below Code and Add The Green Code Inside The Code Like Given Below - 

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><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>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Customization Of Comment Bubble Count To Blog

1. Align Bubble Image: To Align Comment Bubble Image right of the title then simply remove red line position:absolute; from above step 2.

2. Comment Bubble Image: You can use any comment bubble image from below. Just simply replace Image URL shown in blue above in step 2, with your own one.

Comment Bubble Count Icons

1. To use these below images simply "Right Click" one image and get "Copy Image Address/Location".

Its all done. Just click on Preview button and have a look at your blogger post first, if every thing is correct then save template and enjoy blogging. Instead of adding the above bubble comments image, you can add your own image.