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
- ]]></b:skin>
- Now add the following code above of
.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>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzgyXYwkGfJeyyDyp4eMbyHmfIqM4uvbGHpoX_3nTCcxg4MG9TYrpUSbcD8NLNE7Qu8O_3kMpgrXClqtjUjP5ADLzAR1_b8BRpah0wwu-aAcYkTx0N9rMwFSZsPG3_1qCnRvVSQ_AXPvsK/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.