Tips & Tricks Tuesdays: Rachel @ Sew Happily Ever After! ... and... Adding numbered comments to blogger

9:02:00 PM

Hi all, and welcome to Tips and Tricks Tuesdays: What would MacGyver do?


Today is a very special Tips & Tricks indeed - Rachel over at Sew Happily Ever After is hosting!

YourSiteTitle
Head on over to her blog to see what kind of shenanigans she's up to, and make sure to link your tip or trick up to party with her!

I have a very quick tip today to share.

Do you have a newer Blogger blog template that, when people leave comments, the comments aren't numbered?

And then have you ever had a giveaway and had to count to 194 like I just did because said comments weren't numbered?

Well! I've found CSS code that actually works - for my blog at least!

**I should disclose that this won't work on every template - I'm running on the new Blogger version on a Simple Template - this may or may not work on a Classic Template**

Your comments have to be set to "Embedded" in your Settings for this to work... here goes.

I always suggest you back up a copy of your template before making any edits.

1. Head over to your blog. In the new blogger interface, click:

-Template

- - Customize 

This brings you in to the Blogger Template Designer.

2. Click on: 

- Advanced

- - Add CSS
3. In the white box ("Add CSS here to override")
you enter this code:

.comment-thread ol {
counter-reset: contarcomentarios;
}

.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}

.comment-thread ol ol {
counter-reset: contarbis;
}

.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #666666;
}

(Press 'Enter' after the last '}' bracket)

That's it.

If you want your comments to be beside the person's name, change the "float" parts of the code above to say "left" instead of "right" (make sure to include the ';' after the 'left' or 'right'

If you want the font to be smaller sized, change the 'font-size' in the above codes to "14px"

4. Click:
- Apply to Blog

.......and ta da! you should see your comments now numbered.

Only took me 2 hours to find a code online that actually worked. I just hope that it works for you, too!

Now head over to Rachel's blog to check out her tip, trick or tutorial today!


You Might Also Like

12 comments

  1. Oh my word - thank you, thank you, thank you!!!

    ReplyDelete
  2. I followed your instructions ... all my comments are #1 - they aren't incrementing. Anyone have any ideas?

    ReplyDelete
    Replies
    1. Hi Eileen,

      I emailed you just now some suggestions. This hack won't work for everyone with every template, but, it's worth a go I think. :)

      Delete
  3. Hi Erin, I found your blog through nissaMade' s blog, and I'm glad that I found it because I'll do a giveaway in a few days and I found this tip to "add numbers to the comments" at the perfect time. Thanks for sharing your knowledge with us, it is really appreciated.
    With me today you have a new follower and you will see me here often because your blog is really great.
    I hope you do not mind, I just pinned this post on my board of Pinterest!
    Marisa from
    http://passionetcouture.blogspot.ca/

    ReplyDelete
  4. I also got the all 1's problem as Eileen. Thoughts? p.s. I should have done this BEFORE the Dare to Dresden blog hop :)

    ReplyDelete
  5. Thanks for the tutorial on adding numbers! It worked beautifully.

    ReplyDelete
  6. I was lost from the get-go! Don't worry, it isn't you, I just don't follow techy directions very well . I have to be Shown, Practice, correct, Shown again, then try again. That's just how I roll and why I made a great teacher for Learning Disabled kids. I understood WHY they didn't get it! Thanks anyway
    Blessings
    Gmama Jane

    ReplyDelete
  7. A follower recommended your link when I needed help and it worked perfect! I have referenced the link on my blog so that maybe a few others can use your instructions! Thank you, I really needed help! Great instructions!

    ReplyDelete
  8. This worked like a charm! Thanks so much for sharing this oh-so-useful information :o)

    ReplyDelete
  9. Erin and Rachel, this is the first one that has ever worked for me.. Thank you!!!
    You can change the color too using RGB hex codes. Here is a handy chart: http://www.umsiko.co.za/links/RGB-ColourNamesHex.pdf

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question.

I like to email everyone back when they've commented - so if you're a no-reply blogger, make sure to leave your email address in your comment so I can share the love back atcha!

SUBSCRIBE: Posts in your Inbox!