Thursday, 20 February 2014

Tagged under: , ,

How to Add Beautiful Bubble Comment Counter to Blogger Blog

Adding a bubble comment counter in blogger

Comments are always seen as an important factor in the success of your blog. Users normally comments on your blog to appreciate author of that post, or to ask questions. One way to judge the popularity of the post is to see the number of comments post has received and for that you need to put comment counter on your blogger blog. In this article I will be explaining you how to add beautiful bubble comment counter to blogger blog.

How to Add Beautiful Bubble Comment Counter to Blogger Blog


Step 1

Login to your blogger blog and select the blog from your blog dashboard. Now select template >> edit html.

Step 2

Click in the template code area and press ctlr + F5 to open search box and type the following code in the search box.

]]></b:skin>

Step 3

Now expand the code by clicking the arrow next to it and search for the above code again, simply add the below code above ]]></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 4

Once the above code is added to the template, search for the code below

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

If due to some reason you are unable to find the above stated line of code look for the code written below.

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

Step 5

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>

Customizing comment counter 

You can change the #ffffff hex color code to the choice of your color or color which suits to your template. Similarly, change 18px font size to your preferred font size.

I have provided a few beautiful images that you can add to your blogger bubble comment counter, just replace the URL with the above stated URL in Step 3 that is highlighted in pink color.

http://1.bp.blogspot.com/-tajQUIlIBwk/UwY-hd8II0I/AAAAAAAACZw/E5TKYVDimdY/s1600/blue+bubbe+comment+counter.png

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

I hope you have liked our effort of providing a beautiful bubble comment counter to blog post title. Do write to us in the comments section.

2 comments:

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism