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">

.commentNumber

{

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;

}

</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>

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!

~Cara

Pin It