Tips & Tricks Tuesdays: Rachel @ Sew Happily Ever After! ... and... Adding numbered comments to blogger
9:02:00 PMHi 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!
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!
12 comments
Oh my word - thank you, thank you, thank you!!!
ReplyDeleteI followed your instructions ... all my comments are #1 - they aren't incrementing. Anyone have any ideas?
ReplyDeleteHi Eileen,
DeleteI emailed you just now some suggestions. This hack won't work for everyone with every template, but, it's worth a go I think. :)
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.
ReplyDeleteWith 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/
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 :)
ReplyDeleteThanks for the tutorial on adding numbers! It worked beautifully.
ReplyDeleteThank you! Worked great.
ReplyDeleteYEY! IT WORKED! YOU are BRILLIANT!
ReplyDeleteI 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
ReplyDeleteBlessings
Gmama Jane
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!
ReplyDeleteThis worked like a charm! Thanks so much for sharing this oh-so-useful information :o)
ReplyDeleteErin and Rachel, this is the first one that has ever worked for me.. Thank you!!!
ReplyDeleteYou can change the color too using RGB hex codes. Here is a handy chart: http://www.umsiko.co.za/links/RGB-ColourNamesHex.pdf
I ♥ to hear from you!
Thank you for taking the time to leave a comment or for asking me a question. Rather email me? Reach out at sewathomemummy@gmail.com.
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!