How To Add A Comment Bubble Just Next To Blogger Post Titles

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.

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


]]></b:skin>

add below code just above it

.comment-bubble {
    float: right;
    width: 48px;
    height: 48px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUIz1vSalIkF_5-Y650GdM4tB27FY3YqLpwJqjFHj9PUZn_0KOnRQecaXO6aKAIIWEBr4uzQk5HK7daz7KcuEQ-A12FnV0MjJbEsB_Uk0razVIFHylRj4wMvUtKmESow0kSVU8yxU2k0/s1600/pro-blogging-tips.blogspot.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.