How to Add Numbered Comments in Blogger

Another Amazing trick for bloggers that is highly recommended for them.This trick is about How you can add numbered comments count that will show inside a speech bubble in your Blogpost page.

With this Trick You or Your readers can easily count how many Total number of Comments were found on Blogger Post page.By Adding the Comments count in your Blogger will help you to improving your Blog value and Importance.

How to Add Numbered Comments on your Blogger

Step 1: Go to your Blogger Dashboard ,then go to your Blogger "Template" and hit on "Edit HTML" button.
 

Step 2: In Blogger Template HTML ,Press (CTRL+F) for opening the Search Box.

Step 3:Then Type this Following Code for searching it inside your Blogger template.
Code:

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

Step 4:Once you will Find it , Now copy and paste this code just Above it.
Code: 

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

Step 5: Now again go to the blogger Template Search for this Code.

<data:commentPostedByMsg/>

Step 6:When you will find this above Code inside your Blogger template , Then paste this Code just right after it.

<!--comments-count-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-count-stops-->

Step 7:Again search for this HTML Tag inside your Blogger template.

</head>

Step 8: Now just Above this HTML tag "</head>" ,paste this code.

<!-- comments-count-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/AVvXsEgjH4AhhgW6_yRZX0pBr7uFZQ5eM5-r5DXsLjMXJHpaAFJGrNAx7bX24SxsXTcfknN81ryEOTib9nw-MRrMGXgsP7DBTxu0rBFkWLM0-ySPY8kiFsxpkqiZZbQp9oMfDE4ydyo1LMahDKRL/s1600/comment+bubble+1.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-count-stops-http://mytrickspedia.blogspot.com-->

 Step 9:If you want to change the Color of your Comments then replace the Red Highlighted Text with your required color HEX VALUE and paste it their.
And if you want to change the Comment Bubble , then simply replace the Blue Highlighted Text link with new comment bubble link.There are a number of comment bubbles that you can easily find on Google.

After completing all the Steps , Now Save your blogger Template and Enjoy !!