Numbering Comments In Blogger/BlogSpot Blogs

Here comes the first Blogger tutorial in year 2010 on BloggerStop. This Blogger hack will add numbers against all the comments in your blog. And each number will be linked to that unique comment. You/your readers can use these numbers and corresponding links to mention or point a particular comment on any of your posts.

Working Demo - Hot Orange Blogger Template.

Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

<b:loop values='data:post.comments' var='comment'>

Immediately ABOVE/BEFORE that, paste this code:

<script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->

Now find this code:

<data:commentPostedByMsg/>

And immediately BELOW/AFTER it, paste this code:

<!--COMM-NUM-STARTS-->
<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>
<!--COMMNUM-STOPS-->

And save the template. Now you will see numbers in front of all the comments in your blog. But they are not well styled.

STEP #3
So now we will style these numbers to match your blogs theme.
GO back to the page Layout -> Edit HTML
and find (CTRL+F) this code in the template:

</head>

And immediately ABOVE/BEFORE it paste this code:

<!--COMM-NUM-STARTS-->
<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
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;
}
</style>
<!--COMM-NUM-STOPS-http://bloggerstop.net-->

Edit the above code (highlighted in RED) to change the image.
And edit the code (highlighted in BLUE) to change the color of the numbers.

Images you may use (Right-Click and select "Copy Image Address/Location"):

---

---

---

---

IMPORTANT: You may use any image instead of the one linked in the code above (STEP #3), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.

Finally save the template and count your comments...

---

Via QuiteRandom & Webaholic