adsense

Tuesday, June 18, 2013

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


Add A Comment Bubble Just Next To Blogger Post Titles
comment bubble



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.




1 comments

  1. This post is very helpful for those people which are new in the field of SEO. It will much better if you describe the whole process in a more convenient way so young SEOs and other general people can understand and use this tip.

    ReplyDelete

 
Posts RSSComments RSSBack to top
© 2011 Pro Blogging Tips And Tricks , blogger , Seo , Backlinks ,Social Bookmarking , Website optimization ∙ Designed by Blog
Released under Creative Commons 3.0 CC BY-NC 3.0