Numbered comments on your threaded comments change blog

Numbered comments on your threaded comments change blog

Friday, January 13, 2012 | Posted by ArtisTutor | Edit Post

Recently I receive a request about how to have numbered comments on the threaded comments trick., so today i will present to you the tutorial about this matter.
Having numbered comments is necessary when you need to keep track of the comments made on your blog.It is useful when you have lottery giveaways and need to extract a random commentary who will win different stuff.
So without other comments......

How to create numbered comments on my blog?

1. Log in to your Dashboard--> Template- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find the following code:

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

4. Right before it add the next code:

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

5. Now find:

 <a expr:name='data:comment.anchorName'/>

... and after it paste the following one:

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

6. Find ]]></b:skin> and before it paste the next code:

.comm-num a:link, .comm-num a:visited {
color: #000 !important;
text-decoration: none !important;
background: #F7F7F7;
border: 1px solid #ddd;
width: 35px;
height: 20px;
float: right;
display: block;
padding:2px;
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}

The red line represent the color of the comment number and the blue one the color of comment number when hovered.
You can change the values in the code to accommodate with your blog necessities.

Save the template and see the results.

IMPORTANT: This tutorial works only with the Threaded Comment Tutorial, so if you didn't change the comments according to that tutorial this will not work for you.
Instead check this tutorial:  Numbered comments on Blogger templates

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email