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.

Comments

  1. Dear Mr. Walia
    Nice tweak. I could successfully made changes as per your instructions and now my comments are serially numbered.

    Thanks a lot. (waiting for reply to my mail)

    Prashant Pandya

    ReplyDelete
  2. Works wonderfully! Thank you very much.

    ReplyDelete
  3. Excelent Jaideep!!
    When I use threaded comments the numbers appear in any place, and the style of the comments is missing. You know how to put threaded comments without loosing the present style of the comments?

    ReplyDelete

Post a Comment

Comment for encouragement

Popular posts from this blog

Configure D-Link 2750U Wi-Fi Router for Airtel

How to write in Hindi on Facebook

Add Reactions Widget to Aspire