Add Bubble numbered count for blogger comments / blogspot comments
Lets quickly get into the process on how to add numberd comments in the blogger / blogspot simple tutorial
add bubble number for comments blogger blogspot

STEP 1)

Those who using Old Blogger interface:
  • Go to Dashboard > Design > Edit HTML > (check the check box)Expand Widget Template

Those who using New Blogger interface:

  • Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)


STEP 2) Now find (CTRL+F) this code in the template:

<b:loop values='data:post.comments' var='comment'>

STEP 3) Immediately above/before that, paste this code:

<script type='text/javascript'>var CommentsCounter=0;</script>

STEP 4) Now find this code:

<data:commentPostedByMsg/>

STEP 5) And immediately below/after it, paste this code:

<!--comments-counter-starts-->
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--comments-counter-stops-->

Step 6) Find (CTRL+F) this code in the template:

</head>

Step 7) And immediately above/before it, paste this code:

<!-- comments-counter-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BYWQKh4f6MQhsi9sGD6k3akLwXJ4fhw9Pl-RvBHjAMUGu5qBuGFBFU0oKawpY59_nn2Ctc2sQ6UTQOEfqmUJ3wHy-rXRMRs7YY0f4i40-bybq7ZRMbOa0aG3cuM-CjpnFzPLHgjEIxg_/s1600/blue+comment+bubble.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
}
</style>
<!-- comments-counter-stops-http://gugly4u.blogspot.com-->

Note:
  • Edit the above red code to your image you like
  • Edit the above blue color code to change the color of number in comment

Here are few images which may you like to use in this tutorial:


how to add numbered buble comment in blogger blogspotblogger blogspotblogspot blogger, how to blogwidget blogger blogspotblogs, how to blogblogspot or blogger, how to blogtutorials, how tocomments, how to, blogspot bloggernew comment, how to blogblog design, bloggerblogger.com



STEP 8) Finally save the template... voila you can see the magic in comments
 
Top