Media Magazine

Add Auto Bubble Comment Count In Blogger Post Title

Posted on the 12 December 2015 by Jani18
Some visitor do not understand the topic or their problem not solved by your description so they ask for help by comment.It is very good way to communicate and to help each other.today we will learn how to add bubble comment count.It show the number of comment on your post within beautiful bubble.It looks very pretty.It can see it beside post title.
how to add bubble comment in blogger

How to add bubble comment count in blogger

Before adding i tell you that i will introduce you two style of this widget.lets start the process

First you have to login to blogger accountNow go to template and edit Htmlclick inside code area and press ctrl+f you can see search box appear.Find this code

]]></b:skin>

Add the below code above ]]></b:skin>

For green


Add Auto Bubble Comment Count In Blogger Post Title
.comment-bubble { float : right; width : 48px; height : 48px; background : url(http://2.bp.blogspot.com/-7FFIKA34Kvw/T4x9E0RmA0I/AAAAAAAAALI/03AG305CesI/s1600/speech+bubble+green.png); background-repeat: no-repeat; font-size : 18px; margin-top : -15px; margin-right : 2px; text-align : center; }
For Blue
Add Auto Bubble Comment Count In Blogger Post Title


.comment-bubble { float : right; width : 48px; height : 48px; background : url(http://3.bp.blogspot.com/-VUzYUHeMr9A/T4x_6ddRwNI/AAAAAAAAB14/zMBy66dPc_Q/s1600/bubble+comment.png); background-repeat: no-repeat; font-size : 18px; margin-top : -15px; margin-right : 2px; text-align : center; }
Now find this code

<b:if cond="data:post.title"> <h3 class="post-title entry-title">
If not found try to find this
<b:if cond="data:post.title"> <h3 class="post-title entry-title" itemprop="name">
After it paste below code
<b:if cond="data:post.allowComments"><a class="comment-bubble" expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick" style="color: #ffffff; font-size: 18px; font-weight: bold;"><data:post.numcomments></data:post.numcomments></a></b:if>
Save your template your work has been done.

To change the color of the comments number, replace #ffffff with your hex color code

To change the font size, increase/decrease the 18px value according to your requirement.

Back to Featured Articles on Logo Paperblog