Add A Comment Bubble Just Next To Blogger Post Titles - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Wednesday, 23 May 2012

Add A Comment Bubble Just Next To Blogger Post Titles


If you want to show the number of comments just next to your blog post tiles then comment-bubble is a best way to show number of comments to that particular post in a small bubble icon.This little bubble will also increase the number of comments on your blog,because by clicking on the bubble your readers can directly access the comment-form of that post.Also you can add this in two easiest ways,just follow below steps carefully and you will easily add this to your blog.

How To Add Comment Bubble Just Next To Post Title?


  1. Go to Blogger Dashboard > Template
  2. Take a backup of your template
  3. Click On Edit HTML
  4. Hit Proceed
  5. Check Expand Widget Templates chechbox.
  6. Find below code in your template

]]></b:skin>


add below code just above it

.comment-bubble {
    float: right;
    width: 48px;
    height: 48px;
    background: url(http://2.bp.blogspot.com/-s-Q0jWivjok/T7y8vH57KaI/AAAAAAAABy4/7NYk84YYoKE/s1600/helperblogger.com-commentbubble.png) no-repeat;
    font-size: 18px;
    float: right;
    margin-top: -15px;
    margin-right: 2px;
    text-align: center;
    position: float;
    text-align: center;
}


Now find for below code in your template

<b:if cond='data:post.link'>


replace it with below piece of code,

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

Now take a preview of your template,if you want to adjust the position of comment bubble then you can change the above CSS values as you need.When you feel that everything is ok then save your template.You can also replace the bubble with your own bubble,just replace the URL of bubble with your own bubble URL.

24 comments:

  1. thanks, worked great. do you know how to remove the comment link that is still underneath the blog post?

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. this code (b:if cond='data:post.link')

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. I just found Review on Adiphene, Triactol, Provillus and ZetaClear, Phen375, Garcinia Cambogia Select and Acai Plus with Detox Plus Today, so thought it would be great piece of information to share!

    ReplyDelete
  6. This post is awesome..i've been reading tons of crap posts from other blogs, but shows you have a more educated reader base.
    bad credit business loan

    ReplyDelete
  7. A Pew Research Center report indicated that online social networking have become political hotspots in the United States.

    ReplyDelete
  8. There are different methods used for the breast enlargement.
    Load Systems

    ReplyDelete
  9. Hello you have a great weblog over here! Thanks for sharing this interesting stuff for us! If you keep up this good work I’ll visit your weblog again. Thanks!

    cell phones

    ReplyDelete
  10. good work
    http://hackdefencesecurity.blogspot.in/

    ReplyDelete
  11. How can we get the code if you dont allow people copying from your blog?

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. Thanks! for this interesting article, it's really good.
    This post is really Great this is what i am looking for this full of information .Thanks for this idea.I love it.

    Gmail Account Support

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. Do you need a loan to pay your bills? do you need a loan to start up business ? we offer all kinds of loans, if you are interested in getting a genuine loan at a cheaper interest rate of 3% simply contact:

    Email: Oceanicfinance113@gmail.com
    website: https://oceanicfinancialhome.wordpress.com
    Whatsapp: +1(267)725-7570

    Mr Kellie Wilson

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM