How to add stylish bubble comment counter in blogger

How to add stylish bubble comment counter in blogger

This widget helps your visitor to see how many comments in your post. This is a big success of your blog and your article. This is a note able thing that every seo first see comments of our blog for commenting. 
In this post i explaining that how to add this widget to you blog.


How to add stylish bubble comment counter in blogger

Step 1 :
  • Go to your blogger dashboard.
  • Now select Template 
  • Edit HTML
  • Now search for   

  •    ]]></b:skin>
  • Now add the following code above of
                          ]]></b:skin 
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://goo.gl/92MxG2);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}


  • Once is above code is added now search for this code below


<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>


  • If you could not find this code then search for this code

<b:if cond='data:post.title'>
 <h3 class='post-title entry-title' itemprop='name'>

  • Now add the following code immediately after this code

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #000000; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>


                                                                              comment box for blogger  Lush web

http://2.bp.blogspot.com/-deUeRK-vxYs/UwZCxXHeqmI/AAAAAAAACaI/fFjC36E83tk/s1600/pink+comment.png

You can change the #ffffff code with your choiced color 

 just replace the URL with the above stated URL in Step 3 that is highlighted in pink color.

Blockquote

Unordered List