Numbered comments on your threaded comments change blog


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

Get Latest Updates For Free!

Subscribe via Email

27 comments

January 13, 2012 at 3:04 PM

wow, thanks for information sob ;)

January 13, 2012 at 8:00 PM

Ah you are one great chap! Thanks for sharing all the work so quickly :)

January 13, 2012 at 8:20 PM

@GodfrinaGlad I can help you.

January 22, 2012 at 12:29 PM

It's work at my blog. Good job, thak's for sharing

February 5, 2012 at 5:50 AM

@Artistutor,

Thanks for your useful tutorials, I'm using it and sharing...

I put the numbered comments code on my blog and doesn't works. What Did I make wrong?

I'll appreciate any help. Thanks again,


Claudio

February 6, 2012 at 1:45 PM

@ClaudioTécnicoFollow the steps exactly and it will work.

February 6, 2012 at 3:03 PM

@ArtisTutor

Thanks for reply.

I made all steps from beginning, and now it's working, but the numbers of posts don't increases. I revised the code many times and it's correct.

Can You give me some help?

Thanks,

Claudio

February 6, 2012 at 3:06 PM

@ClaudioTécnicoSend me your template

February 7, 2012 at 3:49 AM

@ArtisTutor

I send You my problematic template. Thank You very much.

Claudio

February 7, 2012 at 1:45 PM

@ClaudioTécnicoFixed and sent to your email

February 7, 2012 at 6:32 PM

@ArtisTutor

Thanks, works perfectly. It was a code problem?

Hugs,


Claudio

March 9, 2012 at 1:35 AM

thank you :) I use it on my blog.
this was perfect, nice work!

--but, the numbers continue just on each page, so the numbers start at 1 until 200 on each page. Is there any possibility the numbers continue all over the page? so there is number 201 and so on?

thank you

March 9, 2012 at 10:05 AM

@Nurmayanti ZainI will try to find a solution for the problem.

March 9, 2012 at 4:11 PM

@ArtisTutorsee my blog...! why...?? :( thx...

March 9, 2012 at 8:02 PM

@Lentera LangitWhat is the problem?

March 15, 2012 at 5:21 PM

It says the first code can't be found in my template. :(

March 16, 2012 at 12:06 PM

@treeIMPORTANT: 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.

April 30, 2012 at 11:30 AM

thank 4 u , i like your post, mantap,, :D

June 5, 2012 at 3:53 AM

Thanks for information....,
i like it..,

Anonymous
June 12, 2012 at 3:49 AM

Hi there! I hope you don't mind but I decided to submit your web site: http://www.blogger.com/comment.g?blogID=7951247725208513708&postID=5860008899804569432 to my online directory. I used, "Blogger: Artisteer Tutorials, Tips & Tricks" as your site title. I hope this is alright with you. In case you'd like me to change the title or perhaps remove it entirely, contact me at drewpryor@gmail.com. Thank you so much.
Here is my site ... sushi fish

June 25, 2012 at 5:08 PM

Hi..., nice info... thanks

July 2, 2012 at 9:31 AM

i like this post.. :)

July 10, 2012 at 12:22 AM

Thank you! I don't know how many tutorials I tried last night before I found yours, and it is the only one to work with the new threaded blogger. Thank you so much for this post and the Threaded Comments post!

July 27, 2012 at 6:01 PM

@ArtisTutorgreat info, thanks for this tutorial

September 4, 2012 at 10:35 AM

thx , i like your post :D

February 11, 2013 at 12:50 AM

Thanks i like it.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers