How To Add Customized Bubble Comment Counter To Your Blogger Blog

How To Add Customized Bubble Comment Counter To Your Blogger Blog

Having a customized blog most times it attract your visitors and for you to be able to do this you need to know how to edit your html code without making mistakes.

Bubble comments counter

Commenting most times is very important because it brings more knowledge from unclear posts and with this comment box most beginners are now pro bloggers.

Below are some helpful tips on how to customize comment counter to your blogger blog using bubble.

Step 1
You need to login to your blogger account and then click on the blog you want to work on.

Step 2
Now scroll down your mouse to the template tab and then click on it then on the template page click on edit HTML.

Step 3
Then make sure that you backup your template first before performing this task.

Step 4
Now on your keyboard press CTRL+F button and then search for this code below


Step 5
Now add this code below above the ]]></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;

Step 6
Now you still need to search for this code below

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

Step 7
Now add the code below, after  the code above

<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>

Step 8
And that's all you need and then click the save button and go to blog and reload the page to check how your comment box will look like.

Don't forget to drop your comment thanks.

1 comment

  1. Thanks for the great post. I have been looking for how I will do this for my blog www.saminuabass.blogspot.com