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.

Numbering Comments In Blogger
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(https://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-https://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“):
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs
Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs Numbering Comments In Blogger/BlogSpot Blogs

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

Leave a Reply

173 Comments on "Numbering Comments In Blogger/BlogSpot Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
Divya Sai
Guest

A test comment – to check Numbering in Blogger hack 🙂

View Comment
Aakar
Guest

cool one…

View Comment
P.T
Guest

It's not working on mine…:(

View Comment
Анна
Guest

Super! 😉

View Comment
Divya Sai
Guest

@P.T.
I couldn't find the code in your template. Leave the code as it is, so that I can it for errors. BTW …nice template.

@Анна
Thanks. If you are using some other icon (when I checked your blog, it was blue bubbles icon), then make sure you also change the dimensions (width and height)-For that blue bubbles icon dimensoins are 55×53 (55-width & 53-height).

View Comment
Lex
Guest

Beautiful icons…thanks.

View Comment
Magali
Guest

I can't find the said lines in my template! :((

View Comment
Sai @ BloggerStop.Net
Guest

@Magali
Out of these two lines:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

If first one's not there in your template, then find only the second line, and paste that code (in red) just above it.

View Comment
Kristyanna
Guest

This is a great idea. I have numbers on my comments but no images yet (my choice right now).

You can adjust how high the number are by changing the -15 in the command margin-top: -15px;

I believe I adjusted mine to be -23px.

Great job with the coding!!

View Comment
Sai @Blogger Widgets
Guest

Thanks for adding that point Kristy.
So as mentioned by Kristyanna, if you want to adjust the position of the icon+number, then change the values against margin-right and margin-top. Also you can change the font-size of these numbers.
And, to make the numbers bold, change this:
font-weight: normal;
to this:
font-weight: bold;

View Comment
Beben
Guest

wow….awesome hmmm…:X

View Comment
BEN TOOLS
Guest
Divya Sai
Guest

That's great Beben, I think you can make the font more bold.

View Comment
Baba
Guest

Thanks 4 sharing. I will try.

View Comment
Poras
Guest

I am not able to find this code in my blog

View Comment
Divya Sai
Guest

Hi Poras, make sure that you have ticked the box "Expand Widget Templates" and read my reply to Magali's query. Anyways I'll update the post too.

View Comment
Divine Brahmanda
Guest

Hi, Divya Sai
I cannot find this code <data:commentPostedByMsg/> in my template. what should i do now?

View Comment
Poras
Guest

I am also having the same problem as Divine Brahmanda

& (I am not able to write html codes in comment form also in your blog.)

View Comment
Divya Sai
Guest

The overall code will look similar to this in your blog (code varies from template to template), the bolded part of the code is what you to add:

<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
<!–COMMNUM-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–>

</dt>

View Comment
Poras
Guest

Thanks Divya Sai

It Is Perfectly Working In My Blog Now.

View Comment
wpDiscuz