Add Numbered Comments on Threaded Comments for Blogger V1

Todays i am presenting a tutorial about Adding Numbered Comments on Threaded Comments.This is very helpfull when you need to keep track of the comments made on your blog only you have to do this following CSS trick.

Add Numbered Comments on Threaded Comments for Blogger

Log in to your Dashboard > Template > Edit HTML
Now Click on "Expand Widget Templates"
Using "Ctrl+F" search the following code:

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

Right before it add the next code

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

Now find

<a expr:name='data:comment.anchorName'/>

and after it paste the following one:

<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Find ]]></b:skin> and before it paste the next code

.comm-num a:link, .comm-num a:visited {
color: #000 !important;
text-decoration: none !important;
background: #F7F7F7;
border: 1px solid #ddd;
width: 35px;
height: 20px;
float: right;
display: block;
padding:2px;
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}

The red line represent the color of the comment number

The blue one the color of comment number when hovered.
You can change the values in the code to accommodate with your blog necessities.