Saturday, March 17, 2012

Comment Font, Color and Size


With the new threaded comments on Blogger, replying to comments is easier and more fun. The comment thread is where the conversation between the author and his readers takes place. And I just thought that it would be pretty cool to have a different font style for the comments.

So with my OCD in overdrive, I finally found a way to do just that.

From this...
... to this.

And if want to do the same, you could follow these simple steps. Before doing any edits on your blog HTML, be sure to backup your template. As this is important, I will say it again.. backup your template.


  • On the new Blogger dashboard, go to Template.
  • Click Edit HTML.
  • Click Expand Widget Template.
  • Find this code /* Variable definitions. To do that, click CTRL+F, and paste the code in the search box.
  • Paste the following codes just below the dashed lines.

<Variable name="sscommentfont" description="Comment Font" type="font"
default="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif"/>
<Variable name="sscommentcolor" description="Comment Color" type="color" default="#000000" value="#000000"/>

  • Find this code /* Comments.
  • Paste the following codes under the dashed lines.

.comments .comments-content .comment-content, .ss{
font: $sscommentfont;
color: $sscommentcolor;
}

  • Click Save Template.


When you're done, go to your Blogger Template Designer. You will be able to see 2 new entries - Comment Font and Comment Color.

Entries: Comment Font and Comment Color


I'm using the dominant colors in my blog - orange and green. The font is italicized Georgia. But with these new options, I could change  font face, style, size and color of the comments anytime. Do let me know if these colors make the comments hard to read. I will changed it back to grey.. or blue, maybe. No problem there, I've got a lot of choices.

If you're happy with the way the comments look in your blog, then there is no need to edit anything. But if you want to do the changes, just follow the instructions and you'll do fine. Just remember to backup your template first. You will need them, just in case the codes don't work on your blog. Good luck!




77 comments:

  1. Yeah this is cool, and more fun. I am still satisfied with the current colors of my comments but when I get bored, I'll resort to using this. I'll email it right now to my self. Hehehe.

    ReplyDelete
    Replies
    1. Sure, sure! Gawin mo lang pag feel mo na. hehe.. And be sure to update me kapag gumana sa blog mo ha. :)

      Delete
    2. Of chors, I'll let you know. Hehehe.

      Delete
  2. Ooooh.. Love this color sis! :D It looks nice and fun. Will try this soon on my blog too ;)

    ReplyDelete
  3. Well I think mine are fine how they are but I like again that you wanted to find something out so went for it :)

    ReplyDelete
    Replies
    1. Yeah. It is a great feeling! :)

      When I know that there is a solution out there, I keep trying to find it. I get frustrated when I don't.. And it's also a good thing that I came across this one blog (Southern Speakers), it's a great blog for tutorials and HTML editing..

      Delete
  4. This is so nice.... thanks sa turtorial... will try this nga...

    ReplyDelete
    Replies
    1. Sure, sure. Backup your template muna ha. :)

      Delete
  5. Oh hey, that's me! I'm a star now, right? 8D

    Green is always a good colour to go with. Can never go wrong, really!

    ReplyDelete
    Replies
    1. Yes! That's you! XD

      I think green and orange is a cool combination. The color wheel suggests that green and red is better, or orange and blue.. but oh heck, the green/orange combo works for me. :) With these colors, the comments are still fairly easy to read, right? Not too hard on the eyes?

      Delete
  6. finally for blogger! but still i'll recommend disqus for any blog.. :)

    ReplyDelete
    Replies
    1. The problem with disqus, it doesn't load sometimes.. But yes, it is great for comment threads. :)

      Delete
  7. This is new to me.... im loving the colors here... totally different...

    Eigroj Stain

    ReplyDelete
    Replies
    1. Well, I'm glad I showed you something new. ;) Thanks.

      Delete
  8. It's ice to play with colors to our blogs .I do it sometimes but will end up with the old color and fonts.

    ReplyDelete
    Replies
    1. It's nice to experiment with colors.. you'd eventually find out what color suits your personality and your blog. :)

      Delete
  9. thanks for this! hahaha! i just hope there is a way to be notified of reply to comments without spamming my email... if you know some solutions to this, let me know. =)

    ReplyDelete
    Replies
    1. Sa pagkakaalam ko lang po, you could be notified of replies by subscribing by email. So sa email lang talaga matatanggap ang notifications. I'm not sure if there is any other way..

      Well, if you're using Gmail, I think there is a way to make the notifications from Blogger go to one folder. I used that sa Google+ profile ko. All the notifications from G+ goes to the G+ folder I made. Hindi ko lang maalala kung panu ko ginawa yun. Haha! But I remember, it was a tutorial from Taragis.com. I will get back to you on this one..

      Delete
  10. Bookmarked. Thanks for the tut mam Leah :) I'll try this pag inatake din ako ng OCD ko, haha. Problema ko lang kasi, nakakatamad mag edit ng html kung ikaw pa mismmo maghahanap. Buti na lang meron nito, ctrl+F na lang, haha.

    ReplyDelete
    Replies
    1. Haha! Yes po.. CTRL+F is the way to go. Hirap nga namang hanapin talaga ang codes, lalo na pag hindi mo alam kung saan banda.. hehe. :)

      Delete
  11. i used to do this also before, tweaking and experimenting on blogs..hehehe..but when i moved to wordpress, di na masyado..hehhe..i miss this one..

    ReplyDelete
    Replies
    1. It's a great feeling, diba.. when you edit your codes and it works! Achievement! lol.. I have a Wordpress blog, pero hindi ako marunong magexperiment dun. hehe..

      Delete
  12. wow thanks for the share Leah

    ReplyDelete
  13. oh,,, thanks for making post about this,, try q to sa blog q,,,

    ReplyDelete
    Replies
    1. Sure po. Make sure to backup your template, just to be on the safe side. Let me know if it works, Kuya. Thanks..

      Delete
  14. Nice... it should have a variety to get rid of monotony and also to make your comments attractive. Very nice!

    ReplyDelete
  15. Ang cool ah, I wonder if this, too, is possible with Wordpress.

    ReplyDelete
    Replies
    1. Hmm.. hindi lang po ako sure, Ms N. :)

      Delete
  16. Oh, this is cool! I know how to do this too but in a different way naman. It's fun diba?? Nakakatuwa when you make changes with tweaking!

    ReplyDelete
    Replies
    1. Hehe.. Yes! It is fun! But of course, we have to be careful rin. Kaya kelangan talaga backup muna ang template bago mag edit-edit. hehe. :)

      Delete
  17. Thanks for sharing Leah, I'll try this one too. :)

    ~Talinggaw

    ReplyDelete
  18. Can't wait to try this out on my blog! Thanks so much for posting about this :-)

    ReplyDelete
    Replies
    1. You're welcome. Don't forget to backup your template first. Good luck! ;)

      Delete
  19. Hehe! this is only good for girly sites like yours :)

    ReplyDelete
    Replies
    1. Hahaha! True. It'll be awkward to have this on tech blogs. :D

      Delete
  20. Nice and simple comment box! but i'm currently using Disqus but sometime's it doesn't work well :<

    ReplyDelete
    Replies
    1. I tried it once. Hindi lang sya swak sa blog ko. The only problem with Disqus, sometimes it doesn't load properly. But yes, it is great for comment threads. :)

      Delete
  21. round 2! :D
    I actually love this font...so girly..
    as much na gusto ko rin tong gawin sa blog ko takot ako mag tweak ng template ko..
    My meme ako na hino-host Orange Tuesdays obviously because I love orange..and love ko din ang green..feeling maka-nature lang..

    ReplyDelete
    Replies
    1. Yes, pumasok din! Round2! :D

      This font is the ever simple Georgia. Italicized. Well, if you're hosting Orange Tuesdays, then it is pretty clear that you love orange. :) Interesting.. Baka magjoin ako sa meme na yan, one day someday. :)

      Delete
  22. blogger or blogspot just keeps getting better and better... of course, if you are already happy with how your comments look then there is no need to change it...

    ReplyDelete
    Replies
    1. Yes, of course. If you're happy with how your comments look, there's no need to do this. This is just an option.. to those who want to make their comment threads look more attractive with different fonts and colors. :)

      Delete
  23. Green is always cool to the eyes. Thanks for this post. This will help a newbie like me.

    ReplyDelete
  24. talk about being meticulous.. well it has merits after all...

    ReplyDelete
  25. You're such a html wiz! The blog's looking great and lurrrrrving the green

    ReplyDelete
    Replies
    1. aww.. Thanks, Cindy! I just love experimenting with my blog. But I'm not a whiz. hehe.. That honor should go to YOBOY. He is the author of the blog, SOUTHERN SPEAKERS. I left a link of his blog on the post above. Do check him out for some more tutorials. :)

      Delete
  26. hey this is nice.. sige nga ma try.. I want mine red.. hehe ;)

    ReplyDelete
    Replies
    1. Go ahead! make yours red. :) Backup your template first before doing any tweaks. :)

      Delete
  27. I wanna try this but too tamad right now

    ReplyDelete
  28. Ohh yeah! Ang clever na man! May ganyan din ba sa wordpress? Want mine to be blue or red! Cute2x.

    ReplyDelete
    Replies
    1. I'm not sure po kung meron sa Wordpress. Malamang, meron pero hindi ko alam kung panu gawin. hehe..

      Delete
  29. i'll try this out soon! :>

    ReplyDelete
  30. I want to revert back to blogger. Hmph. Ngayon lg kasi to. Huhu. Y o y.

    ReplyDelete
  31. Bookmarked! Matry nga bukas :)

    ReplyDelete
    Replies
    1. Let me know if it works on yours, Algene! :)

      Delete
  32. Try ko nga din to kung gagana sa blog template ko

    ReplyDelete
    Replies
    1. I'm pretty sure it works on default Blogger templates. Go ahead, try nyo po. Let me know if it works on yours. Back up your template first.. :)

      Delete
  33. Ate Leah, I've tried many times na gawin yung threaded comments sa blog ko. Pero di ko parin magawa. huhu... Panu ba yown? :c Can you post a tutorial link na madali sundan po? Thank you :)

    ReplyDelete
    Replies
    1. Custom template kasi ang gamit mo, Lily.. pero merong tutorial kung panno gumana ang comment threading on customized templates. Just not mine.. Nabasa ko lang din. Share ko lang sayo. I'll leave a comment on your blog. :)

      Delete
    2. The tutorial worked on my blogs ate. Maraming maraming salamat sa pag-share nung link!:))

      Delete
    3. That's good to know. You're welcome, Lily. :))

      Delete
  34. I will try this when I have time. Have a nice day!

    ReplyDelete
  35. I will be trying this very soon coz I'm planning to make another blog from blogger. :)

    ReplyDelete
  36. nice! I actually tried but failed :-( hu hu hu!

    ReplyDelete
  37. Napakahelpful ng post na toh Ate Leah! Sadly, hindi ko siya maaapply kasi may template na kakaiba yung blog ko at kukutingtingin ko manually yung codes para mahanap ang nagpipigil sakin upang magkaroon ng threaded replies... huhuhu

    ReplyDelete
    Replies
    1. Aw. Ayos lang yun.. Yes, you do have a customized template. Mahirap na baka masira ang buong blog.. So it's better na wag na lang. Dami mo pa namang fans. Baka magalit lang sila sakin, Stephie. hihi..

      Delete
  38. Thanks for sharing these tips. Personally, I like the previous one though =P

    ReplyDelete
    Replies
    1. You're welcome! :)

      Well, I think I'd revert back to the grey font color if I get many complaints. But for now, I'd stick with the green. Plus, it's also to show you that the codes DO work. :)

      Delete
  39. Thank you for sharing this! nice tips.i will keep tab on your post just in case i would have time and spruce up my blog some more!

    ReplyDelete
  40. wow! I've been waiting for this tutorial. yey! at last. thanks for sharing :)

    ReplyDelete
  41. Thank you! This will be very useful. :-)

    ReplyDelete