Tweak Your Aspire – Numbering Comments

Your Blog is popular, unlike mine :) , and a lot of visitors leave comments on your posts, again unlike mine, do you wish you could number the comments. Numbering comments have lots of advantages.

First “It looks Cool” and that’s hot.

It gives you permalink to your comment, which can be given in other posts.

So lets start the project……

Go to Layout => Edit HTML and then click “Expand Widget Templates”.

Now search for

 

]]></b:skin>

 

and  just above this copy and paste the following code

/*Start Changes to be made to Put Comment Numbers */
.numberingcomments {
/* add the CSS properties here */
text-align:right; font-size: 25px;
}
/*End Changes to be made to Put Comment Numbers */

This is where you can change the font size and align your Comment Number.

Now we have to add some more code so the the functionality of adding comment numbers could be achieved.

 

Part One

First search for the code

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

Just Above this line paste the following code

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

So that the code looks like this

<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>

 

Part Two

Now is the tricky part. You have to be careful while following this.

Search for this code below.

<div class='message-by'>
<b:if cond='data:comment.authorUrl'>

 

 

The code around it should look like this. I have inserted comments so that it becomes easier for you to follow the code.

 

<div class='message-by'>
<!-- Add Code One here -->
  <table border='0' width='100%'>    
        <tr>        
            <td width='10%'/>        
            <td width='60%'>        
<!-- Code One Ends here -->    
 <b:if cond='data:comment.authorUrl'>      
    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>    
<b:else/>      
    <data:comment.author/>    
</b:if>    
<b:include data='comment' name='commentDeleteIcon'/>



<!-- Add Code Two here -->        

            </td>    
            <td width='20%'>
                            <div>    
    <span class='numberingcomments'>        
        <a expr:href='data:comment.url' title='Comment Link'>        
<script type='text/javascript'>
    
   CommentsCounter=CommentsCounter+1;
    document.write(CommentsCounter)
</script>    
    
        </a>        
    </span>

                            </div>
            </td>
        </tr>  
</table>

<!-- Code Two Ends here -->    
</div>

 

Save your Template and view your blog.
If you are still facing any problem then do leave a comment. Even if you are not facing any problem then also do leave a comment.