Sunday, September 11, 2011

Adding a Counter to Number Your Blog Comments

I've had a few people ask me how I've added numbers beside each of the comments left for me in Blogger.  It's a simple process, which I've explained in this little video tutorial I put together:



Here is the code mentioned in the video.  You can also get the code HERE.

<style type="text/css">
.commentNumber {

  padding: 5px;
  /*Modify the comment number's style here*/
}
</style>
<script type="text/javascript">
(function () {
  var commentList, commentHeader, numBox, i, j;
  commentList = document.getElementById("comments-block");

  if (commentList) {
    commentHeader = commentList.getElementsByTagName("dt");
    for (i = 0, j = commentHeader.length; i < j; i++) {
      numBox = document.createElement("span");
      numBox.className = "commentNumber";
      numBox.appendChild(document.createTextNode(i + 1));
      commentHeader[i].insertBefore(numBox, commentHeader[i].firstChild);
    }
  }//end if (commentList)
}());
</script>>

I'll have another Fantabulous Cricut project to show you tomorrow morning.  See you then! 

16 comments:

Julie said...

Thanks! Worked like a charm
Hugs,
julie

Amy said...

Kate- Thanks so much for doing this and it worked great! I love learning new tricks like this- I've been trying to figure this out myself without much luck -THANK YOU!!! :)Amy

Kerry--Momma K said...

Thanks Kate. You made it so easy. Cute video.
Kerry

mommakcrafts.blogspot.com

Karen said...

thank for sharing this will take a love of time out of figuring winners for blog candy!

Besthobbyeva said...

Hi Kate - I was so excited, I thought was going to hear your voice. Well maybe its your voice and you talk like a robot, lol!! JK!

Thanks so much for doing this video (very impressive I might add)! Very helpful!

I hope all is well!

Laurie

Kimberly said...

Oh how fantastic...worked like a charm. The last prize i gave away was brutal counting through all the comments...thanks so much..
www.justwordz.ca

Doris P. said...

awesome thanks. can I "copy" this over to my blog too?? let me know doris
parkernana5@cox.net

stamps&cars said...

worked like a charm, I posted a link to your blog so others can enjoy!

Sarah said...

thank you so much! I'm having my very first blog giveaway and was concerned about how to get set up for that! It worked perfectly!

Scrapper69 said...

WOW Kate...I always kind of knew your voice sounded like that! tehehehehehe Oh and by the way your picture off to the side doesn't look anything like you in the video! LOL
Thanks so much for showing the video, it was very helpful! :o)

Theresa

Sentimental Scrapper said...

Thanks Kate! I have had this on my blog for a while now (thanks to you!!!!) and I love it!

Shelly Schmidt said...

Thanks for this tip- it is very cool and I will be using it! Love this especially for blog candy!

Linda w said...

This is a great tip, Shelly passed it on to me. I found it didn't work with pop up box comments so I've switched back to below posts comments. I'll leave a link to you for others to find this tip. Thanks for your hard work. Hugs lin

cgl1539 said...

Thank you so very much, this is really helping with the comments for our blog hop!

Natali said...

Amazing!! Thank you!! Will use this for sure.. My live become easy )) Thank you Shelly to sent me to this blog!!
Hugs
Natali

melanie said...

Thank you so much! Just added this to my blog!