• Home
  • Blogging
    • Blogging Tips
    • Internet Marketing
    • SEO
    • Guest Blogging
    • Tutorial
    • WordPress
  • Social Media
  • Internet Marketing
  • About
  • Advertise
  • ToS
  • Privacy Policy
  • Write here
  • Contact

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

Jun23
2011
2 Comments Written by Abhi
PinExt [How to] Add Bubble comments count in blogger blog [Tutorial]
ScreenShot019 [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"]


Comment+Bubble+%281%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%282%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%283%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%284%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%285%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%286%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%287%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%288%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%289%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%2810%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%2812%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%2813%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%2814%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%2815%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%2817%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%2816%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble+%2818%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Comment+Bubble [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%281%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%282%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%283%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%284%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%285%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%286%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%287%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%288%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%289%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2810%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2811%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2812%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2813%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2814%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2815%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2816%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2817%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2818%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2819%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2820%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble+%2821%29 [How to] Add Bubble comments count in blogger blog [Tutorial]Blogger+comment+bubble [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%281%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%282%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%283%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%284%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%285%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%286%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%287%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%288%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%289%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble+%2810%29 [How to] Add Bubble comments count in blogger blog [Tutorial]comment+bubble [How to] Add Bubble comments count in blogger blog [Tutorial]

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

About Abhi Balani

Hello reader, I'm +Abhi Balani, owner of this blog. I'm a future Computer Engineer and a part time blogger as well. Love to connect with others. Boy with so many dreams. I try to give best blogging tips on my blog. Visit my My tech Blog

  • web [How to] Add Bubble comments count in blogger blog [Tutorial]
  • twitter [How to] Add Bubble comments count in blogger blog [Tutorial]
  • facebook [How to] Add Bubble comments count in blogger blog [Tutorial]
  • google [How to] Add Bubble comments count in blogger blog [Tutorial]
  • youtube [How to] Add Bubble comments count in blogger blog [Tutorial]
  • wordpress [How to] Add Bubble comments count in blogger blog [Tutorial]
Posted in Blog Customs, Blogger Widgets, Comment, Tutorial
← [How To] Add Recent Comments To Blogger [tutorial]
5 beginner SEO steps for New bloggers →

2 Comments

  1. Ramcel Gatchalian's Gravatar Ramcel Gatchalian
    June 28, 2011 at 11:32 am | Permalink

    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?

    Reply
  2. Abhi Balani's Gravatar Abhi Balani
    June 28, 2011 at 1:31 pm | Permalink

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

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badgeShow more posts


Recommend on Google
  • RSS Feed
  • Pinterest
  • Google Plus
»»

Talk of the Town

  • Writing Tips at a Glance (66)
  • OddBlogger WON Blog Engage Guest Blogging Contest #2 (57)
  • OddBlogger.com is now Self-Hosted WordPress Blog (43)
  • Blogger to WordPress Migration! (40)
  • 10 Ways To Win Loyal Fans Through Blogging (38)
  • Best WordPress Security Plugin – Better WP Security Plugin (32)

Recent Posts

  • Ethical Ways to generate backlinks without using Black Hat SEO
  • 10 Simple Tricks To Improve Your Website Rankings
  • 4 Simple Tips To Succeed As A Blogger
  • Blog Engage Guest Blogging Contest #3: Participated again
  • OddBlogger WON Blog Engage Guest Blogging Contest #2
  • Content Marketing Guidelines to Keep up with Google Algorithm Changes
  • Sure Fire Link Building Strategy For Mass Traffic
  • Reduce Stress and Improve Blogging Performance by Changing Your Diet
  • Best WordPress Security Plugin – Better WP Security Plugin
  • Why is it necessary to take a break from blogging?

Categories

Write on OddBlogger.com
I love comments

Meet the Odd!

I'm Abhi Balani, owner of oddblogger.com. A computer science student, future computer engineer and part time blogger. Know more about me and my blog: Click here.

Top Commentators

  1. Amrik Virdi Amrik Virdi (7)
  2. Zeeshan Zeeshan (7)
  3. Arbaz Khan Arbaz Khan (5)
  4. Jane Jane (4)
  5. Jeet Dholakia Jeet Dholakia (4)
  6. Andreas Pazer Andreas Pazer (3)
  7. ashish ashish (3)
  8. Mohideen Mohideen (3)
  9. bbrian017 bbrian017 (2)
  10. Holly Jahangiri Holly Jahangiri (2)

EvoLve theme by Theme4Press  •  Powered by WordPress OddBlogger
Best Blogging Tips

Back to Top