Denim Column

About The Author

My photo
Alabama, United States
Educator and Lifelong Learner, Asst Principal at @cmslions, #NBCT, #EdD from @ucumberlands, @Google Educator Lvl 1 & 2, Google for Education Certified Trainer

Sunday, January 15, 2012

My Comments Are Numbered!

I spent hours (and I mean hours) yesterday trying to get my comments numbered. Recently, I held a giveaway and spent time counting and recounting and counting again to make sure I had the correct comment #71. I knew then it was time to find a solution to my problem.

I turned to my trusting friend Google to search for my answer. I came across countless HTML codes that I changed with no luck. I found a simple post from Ladybug Teacher Files that simply added a gadget. Guess what, I still had no numbers! So, I put out a "Help Wanted" plea. Elizabeth from Fun in Room 4B commented that my numbers may not be showing up because I had comment replies enabled. Viola! That was the answer.

I want to share with you step-by-step on how to number your comments by disabling replies in case you are having the same problem

1)Log into your blog, and select "Design."
2)Click on "Settings">"Comments."
3)Make sure "Full Page" is checked and not "Embed Below Post." **This is what was causing my numbers not to show. 

4)Select "Design" again.
5)You will now "Add a Gadget."

6)Copy and paste the following HTML code into an "HTML/Javascript" gadget. I did make a few minor changes to the code such as font color, size, margins, etc. I wanted smaller numbers in a font that matched my blog. The original code can be found here.

<style type="text/css">
float: right;
margin: 20px;
padding: 0px;
font-family: Arial;
font-size: 16px;
font-weight: bold;
color: #ff9966; /*this is the font color*/
background-color: White;
border-width: 0px;
<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)

7)Move the HTML/Javascript gadget underneath my Blog Posts box on the Design page.

You have to open the post up in its own window in order for the numbers to show. For instance, if you wanted to see the comment numbers on this post, click the title to open it.

You should now see numbers next to your comments. I hope this works well for you, and you don't have to spend hours being frustrated!

Pin It


Journey of a Substitute Teacher (Ms. T) said...

Yeah I gave up on the reply bit (I'll just do it how I did before) but kind of bummed the reply wasn't working.

I got the numbers working though thanks to Kristen and also un-embedding!

Journey of a Substitute Teacher

Lisa Lizak and Beth Wright said...

YEAH! GOT IT! Thanks to you and Kristen, you both are FAB :) Have a happy rest of your weekend :)

Lisa :) (new follower)
Made In The Shade In Second Grade

Farrah Kilgo said...

Thanks for the help, Cara! I posted a link to your instructions here:

Sra. Carro said...

From the bottom of my heart, thank you so, so, so, so very much! I have wasted all morning doing all sorts of tutorials, just to find out from this post that my settings were wrong. Once I corrected it, I had 4 different comment counters going on! Thank you again SO much! Sharing on facebook!

FlapJack Educational Resources

HoJo said...

Awesome! Thank you so much for your help with this! It was not fun at all counting all of those comments during the last giveaway...

Dr. Cara Whitehead, NBCT said...

More than happy to help! I, too, wish someone would have told me the things before I spent countless hours I'll never get back!

Libby said...

Thanks! I'm hosting my first giveaway and your tutorial totally helped!
Dual Kinder Teacher

Unknown said...

Oh my goodness. Thank you!