
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.
Steps To Add Bubble Comments Count

.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
Comment Bubble Count Icons
1. To use these below images simply "Right Click" one image and get "Copy Image Address/Location".









0 comments:
Post a Comment