Numbering Comment Trick

I want a something different with my comment style. another blog have use highlight area for their comment. But, i think it too much used in blogger comment style. What is different style than the other? I think why not use number in my comment. I was saw it, buti was forgot it. And then, i'm use a google search with comment numbering trick keyword, and i find it. I am install it in my blog. and the result will be like this one.

To install this comment numbering trick, there are several step that must do to your template.

Log in into blogger account.

Go to Your layout.

Make your comment HTML code become like this one.

<b:includable id='comments' var='post'>

........

<dl id='comments-block'>

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

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

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>

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

<span class='comment-number' style='float: right; font-size: 20px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>
.......
</dd>

</b:loop>
</dl>

Highlight code can be change with a font-size that suitable with your template

Now, we are finish with a basic step. you can save now, but if you want add CSS style for this numbering comment trick. if you want use CSS, add this CSS code into your template. Make sure that you are add this CSS before ]]</b:skin>

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:53px;
height:53px;
padding:5px 0 0 0;
margin-right: 5px;
margin-top: -20px; /*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;
}

Save your template

look for the result

If you are get problem with the result (ex. comment numbering position), you can fix it with adjust this point.
margin-right: 5px;
margin-top: -20px;

Best regard

One-4-All