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

2
257
views

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


Bubble Comment Count in bloggerBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment Count for bloggerBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountAdd Bubble Comment CountShow Bubble Comment CountHow to add Bubble Comment Countbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment blogger

2 COMMENTS

  1. Interesting tip on how to implement comment balloons.

    Do you happen to have any idea how I can extract the comment count of a post using Disqus and display it below the post title?

  2. @ Ramcel Gatchalian: Thanks for your comments…i m sorry my friends.I havn't used or worked with disqus…..but i'll work for your request soon….keep following…

Leave a Reply