How to add a Comment Count Bubble to Blog Posts: Skye Concept

With a Comment bubble on your blog post makes your page attractive to your visitor. It tells the total amount of comments responds on a post on the blogger page. And it improves our comments and beautifies our blog. Likewise it let our visitors knows what is the popular posts on our blog. Now just take the following steps on how to add this Widget.

1. First Go to Your Dashboard < Edit Html
2. Check Expand Widget Templates Button.
3. Now Find for the  of Code. ]]></b:skin>

• So Place this Below Piece of Code Just Above ]]></b:skin>

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

• Here You Can Add Any images You Want.Just Replace the Url Above with the URl of Your Desired Image.

 Now find the below code

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

 If you can't find it search for this code instead:

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

 Add this code immediately after/Below it:

    <b:if cond='data:post.allowComments'>
    <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
    </b:if>

Now Save Your Template.That's it Now You're Done!