Add Bubble Comments Count in Blogger Post Title

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

Add bubble comments count near your each of you post title can make make your blog more attractive to your visitors. If you are a new blogger in blogging era and want to design your own customize template or modify the existing one, this tutorial is for you. so let's go ahead and add a small bubble comment count in front of your blogger post area.This tutorial will add comments bubble icons to each of your post titles displaying the total count of the comments for that post. You have to add a simple code in your blog Template code, you will be able to see this beautiful in your blog.

How to add bubble comments count ?

• Go to your blogger “Dash Board” >>  Navigate to Layout  >>  Edit HTML section and a give tick to “Expand widget Template”.
• Find this Code

]]></b:skin>

• Place the below code just before ]]></b:skin>

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-_8jIdf23o6J_88LnadVCVnMZnhxhlJ425dM8UhH6xv7bH2Vyhc-wnOOSfhe1-jP6i3mg1r8h1Cj7BVVEjjMgslvd05sX-WcqHYXRsG5MvyBtq-9SuxQkcfyJIrT8YC2dJOlZlkpheP9/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}

Note: To Align bubble image right of the title remove position:absolute;

• Now find the below code and add the red code inside the code.

<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>

• Now click on Preview button and have a look at your post first, if every thing is correct then save template and done.

Kindly Bookmark this Post using your favorite Bookmarking service: