How to Add A Comment Count Bubble to Blogger post title

We have great collection of amazing looking video theme, You can download any theme you like for free. By using these themes, your blog is with an extraordinary feel of professionalism and style. Meanwhile continue reading How to Add A Comment Count Bubble to Blogger post title.

Read Also!

A comment count bubble displayed the current number of comment/s on each blogger post. You can display this Comment Count Bubble wherever you want on your blog post but for this tutorial we are going to display it on your Blog post title. Best thing about Comment Count Bubble it gives you the idea which among your blog post had the most engagement of visitors.

Demo Click here

How to Add A Comment Count Bubble to Blogger post title?

Let us begin with the tutorial:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Theme --> Edit HTML.

Step #3: Find ]]></b:skin> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before ]]></b:skin> tag.

     .comment-bubble {
    float : right;
    width : 48px;
    height : 48px;
    background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLKZZ6nWYJKMjCKSHyABXxzgjPQ8QhxS_aGpauj6MvlqFIVLAJiaDDPN96BFXBPh0ZFXk7QA_Hx6H0sOppuL9ALTn_5xLUHD4OqgYHbJRKslonujIEfKGNIWNp6rEaBC9CJt09zAi78XB/s1600/comment+bubble2.png);
    background-repeat: no-repeat;
    font-size : 18px;
    margin-top : -15px;
    margin-right : 2px;
    text-align : center;
    }

Step #5: Now find this code:

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

or (If you can't find the code above)

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

Step #6: Add the below code immediately after it:

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

Note: Change font color mark in red: color: #000000;
        Change font size mark in red: font-size: 18px;

Step #7: Save your template and Preview the result.

Conclusion

Congrats !! You have made it. Now you have learned How to Add A Comment Count Bubble to Blogger post title. Hope you liked this tutorial, if you enjoyed then please share it with your friends, please stay tuned with Us for more such awesome tutorials. Happy Blogging!