Browse > Home / / Numbering Comment Trick

Numbering Comment Trick

Wednesday, July 22, 2009 Posted by One-4-All

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.
numbering comment trick
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-" +'>

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

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


    <dd class='comment-body'>


  • 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( no-repeat;
    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



    Rinto on July 22, 2009 at 11:13 PM said... interesting Kang...I've looking for this trick, a long...long...time ago but have found ityet...and now, finally I found it here...thanks a lot yaaa

    Uddin bireun on July 22, 2009 at 11:15 PM said...

    goood info frend Thx for u
    good job =D>

    Post a Comment