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

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!

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!