Add Bubble numbered count for blogger comments

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

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/AVvXsEimumBNDbdRB8tjvD0tzNDhImm-6pTRFPC-haKDil4_COQbwGKplL8QXqyGzsmyOWVLY4JJkUuKxw7ubBUZrkXgNjcUcX-vI6wF-v2oFA8QGJ1Syd9eDWNOcJpcAWhuFkFHaxCSsY52_ibG/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:






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