Pages

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:

  1. Thanks! Worked like a charm
    Hugs,
    julie

    ReplyDelete
  2. 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

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

    mommakcrafts.blogspot.com

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

    ReplyDelete
  5. 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

    ReplyDelete
  6. 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

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

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

    ReplyDelete
  9. 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!

    ReplyDelete
  10. 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

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

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

    ReplyDelete
  13. 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

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

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

    ReplyDelete
  16. Thank you so much! Just added this to my blog!

    ReplyDelete

Thank you so much for posting a comment on my blog. I am so encouraged by the words you leave for me!

(Due to the high amount of spam comments that I receive, I am no longer able to accept comments from anonymous users. Sorry for the inconvenience.)