15 June 2011

Tutorial: How To Number Your Comments

My Dear Friends,

I hold monthly giveaways and sometimes it is hard to correctly count how many entries I have.  I'd seen many bloggers who had numbered comments and thought "Well, why can't I do that?"....easier said than done.  There are plenty of tutorials out there that just.don't.work.  No more.  I finally found one that is fairly simple & takes just a few minutes to do!

Without further ado....How To Number Your Comments!

This Blogger tutorial will add numbers against all the comments in your blog. Each number will be linked to that unique comment!  How awesome!  You can use these numbers as and easy and correct way to find your winner on your giveaways!

When you are done, your comments will look like this:

Numbering Comments In Blogger

Instructions To Follow:


Log in to Blogger, (you will be on the "Dashboard" page.  Click "Design" then "Edit HTML".  Once you're there look under "Edit Template" where you will see a small box next to the words "Expand Widget Templates".  Click that box.


Using (CTRL+F) find the following 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 using (CTRL-F):


And immediately BELOW/AFTER it, paste this code:

<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>

Now you will see numbers in front of all the comments in your blog, but they are not yet styled.  Don't get discouraged - you are almost through!


Now we will style these numbers to match your blogs theme.
Go back to "Design", then "Edit HTML" then click the "Expand Widget Templates" button one more time.

Find (CTRL+F) this code in the template:

And immediately ABOVE/BEFORE it paste this code:

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

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

Here are some sample images that you can use!
(Right-Click and select "Copy Image Address/Location"):

NOTE: 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.

You're done!  
Does it work okay for everyone?


Susan M. Heim said...

Are you missing the end of the code in this section?

< script type='text/javascript'>var CommentsCounter=0;
(taking the space away between < & script at the beginning as well as STARTS-- & > at the end)

I don't see "STARTS--" or ">" in the code.

AmberFaith said...

Hello! Newest follower from the Welcome Wednesday blog hop! Would love for you to stop by and follow back, whenever you get a chance. Have a great week! (:


Helena said...

Thanks so much! I had tried another set of directions and it didn't work for me at all! Now I've got numbered comments! (I didn't even try to style it, I'm just grateful for numbers at this point!)

Janice said...

Yay! It works! Thank you so much!

Celebrating Family

Kimberley said...

Hi! I'm following you from the Wednesday hop. I hope you'll come visit and follow me back at http://healthykidshappykids.blogspot.com

Have a great day!