[How to] Add Bubble comments count in blogger blog [Tutorial]

You must have seen while surfing over the net,a bubble shows total number of comments on the post.For all those new bloggers ,wants to add this bubble ccount to their blogger blog to get a pro looks to their blog,and make it attractive,my Tutorial for How To Add BuBBle Comments Count goes here.

To Add Bubble Comment Count to blogger follow the steps


Go To your Blogger Dashboard.(Back up first) Click on Design-> Edit Html.(check Expand widget box)
First of All Back Up your Template By Clicking Download full template…
Now paste the below code just before ]]></b:skin>

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://1.bp.blogspot.com/_1fRuBdlSpLw/S-_7DPCITWI/AAAAAAAAAXU/EBCsy37ga2U/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
}

Tip: To Align bubble image right of the title remove position:absolute; line from above code.


Now find the below code in your template and add the blue code like 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>

Thats it you are done,Preview if its fine Save it…

Tip: you can adjust widht and height with the image you chose


Below are some of the icons which you can use for your bubble comment

To use this images [Right Click and "Copy Image URL"]