How to Add a Comments Counter Bubble to Blogger

­

 

Generally In many of the blogs we can see a bubble like
comment counter to display the number of comment made in that post by the
readers or visitors which will also encourage the visitors to comment on your
blog and also help to highlight the credibility of your articles.

 

In this blog post I am going to share my trick about
installing the comment counter on your blog.You can see the lime demo of the
comment counter on my blog.To add the comment counter in your blog,just follow
the steps given below which will help you to install fully clickable comments
counter button on the same line as post title in blogger.This comment counter
is right aligned by default.(If you wish to make it Left aligned just change
red marked Right with left in Css Portion)
The following steps will insert a fully clickable comments counter button on
the same line as the post title in Blogger. The comments counter is right
aligned by default.
1.   Sign
in to blogger
2.   Go
to design>Edit HTML
3.   Find
the given tag (press ctrl + F to open the find box and copy the code to find
box for quick finding)

]]></b:skin>
    4.Above
that code copy the given code

.comments-button {

width : 48px;
height : 48px;
background : url(http://3.bp.blogspot.com/_vLeiVavkV_M/TRqeSsZYiYI/AAAAAAAADw0/NKcU4q-Vbq4/s200/comment-counter-bubble.png) no-repeat;
float : right;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding-top:10px;
}

 

Note:-This
comment counter is right aligned by default.(If you wish to make it Left
aligned just change red marked Right with left in above Css Portion)

 

5.Now find
the following block of code using CTRL key + F(put tick mark on Expand widets)

 

 

<b:if
cond=’data:post.title’>
  <b:if  cond=’data:post.link’>
6.Copy
this code block between these two codes

            <b:if
cond=’data:post.allowComments’>

<a
class=’comments-button’ expr:href=’data:post.addCommentUrl’
expr:onclick=’data:post.addCommentOnclick’><data:post.numComments/></a>

</b:if>

 

7.Insert
as follows:
 

<b:if
cond=’data:post.title’>

<b:if
cond=’data:post.allowComments’>
<a class=’comments-button’
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>

 

Save your template then view blog to admire your new
comment counter badge.
That’s it.Enjoy………..
Please
Comment regarding this post.Feel free to comment if you have any problem or
views regarding any post……

You may also like...

1 Response

Leave a Reply

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