How to add numbers to blogger comments

 

As you see in the picture that numbers showing in comment and you can also do this in your blogger or in your site and its also looking great in blogger and in lots of blogger you see that and if you want to add numbers to blogger comments so don't worry i am going to tell you how to add numbers to blogger comments and for that you want to just follow below easy steps and then you will done and its very simple just you want to do some efforts and numbers will shows to blogger comments....

How To Add Numbers to Blogger Comments ?

1, Go to Blogger.com >> Sign-in to your account >> go to template >> Edit html >> proceed >> expand widget template

2, Now find <b:loop values='data:post.comments' var='comment'>, Great tip for finding the code press (ctrl+f)

3, Copy the below code and paste it just above the code.

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

4, Now find this code <data:commentPostedByMsg/> and paste below code just after the code

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

5,Now find </head> tag and paste the below code just above it

<!-- 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/AVvXsEiU11XQ3c8maCrWvnINoW3ofD5AD6yudARZlJaAcR1kudBmSuw28TSH4Vfg8ZlB5bFbyd_8e16gnJle87KNwF9PfRyTAJ2s9xMnFhp42LL_s-r3MuPjWwns7M1pzCq9tb1rzxFSpUu5bamg/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://rockingaseel.blogspot.com-->

6, Save template and done :)
and its not working then you want to make certain adjustments to  the positioning of the numbers’ bubble/balloon by editing the values of the attributes in red above .