Numbering Comments In Blogger

Hi friends,you would have seen for sure in blogger from a long time that,comments the readers do in some blog are numbered starting from count 1 to number of comments on that post page.As i think many bloggers dont like this hack because they don't find any use to it in there blogger but according to me its a great hack to make your blog look different from others and i have made this too simple and beautiful to implement it very easily.

And the second advantage is it makes very easy for readers to find any comment and differentiate between the comments and without numbering,it becomes difficult to find comment if there are lot comments on post,even sometimes i find this problem in wordpress blogs as even they dont use this hack but you should use it for sure.

Before proceding to the tutorial you should have embed comment form in blogger and and back up your template for sure.

Now this is how in picture below the numbering will look like while using my codes.As you can also see this live in my present template i am using in my blog.

And thanx to fernando from quiterandom to make it possible for us to make this numbering possible.

Now login to blogger GO To Layout > Edit/Html > Check Mark Expand Widgets > Press Ctrl+F and search for below codes in your template and add the red lines in between them like i have shown below.

<dl id='comments-block'>

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

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

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

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

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

And now i need some css part to make look the counter of comments to look beautiful so you just add these below css codes before the ]]></b:skin> tag.

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

/*since the numbers are actually links, we need to force the color properties*/

.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}

Now in above codes red link is the background to counter image you can change it with yours.And if you change image correct its width and height option in above css with the size of your image.

One problem you can face after making the css work can be the position of counter in comments.So just edit below lines in above css to make it align to proper postion in your blog if not working at perfect position for you.

margin-right: 15px;
margin-top: -35px;

Now i hope you will love his hack for sure and will use it for sure.One more thing,i insist you to use this hack for sure if you are not using it and don't forget to implement highlight blog author comment for sure as this is what makes you different from your blog readers as i can't live without these hacks.