Make Your Comments more Colorful!
Buzz it
Add some Pizazz to your boring Comments
This tutorial will show you how to make your comments stand out from the crowd and boost your blog’s visual impact.
Blog Bloke readers have been asking me how I was able to add colorful backgrounds to the comments section in my blog.
Ask and ye shall receive. Today I’m going to show you how to do just that, and it’s so easy you’re going to kick yourself for not doing it sooner.
This tutorial will show how to do it for New Blogger templates, but the principle is the same for all you WordPress users out there.So why would you want to do this? Well, for starters most of the professional blogs do it because they know that colorizing the comments section will make their blog stand out more for the same reasons why you would use bold or italics to emphasize specific words in your posts.Anything that adds impact to your blog will make it more memorable and encourage readers to come back and participate in the community, and nothing adds more pizazz than a splash of color so let’s go for it shall we.Go into your Dashboard and click on the Layout, Template sections. Then click on Edit HTML and be sure to put a checkmark in the little Expand Widget Templates box as well.Scroll down your CSS styles section and look for the code that refers to your comments section. In my case it looks like this:.comment-body; {This is the section that formats where my readers can add their comments. So all you have to do is add another line of code there to tell it what the background color should be. My color presently looks like this:
background:#FDF3E1
Where #FDF3E1 represents the HTML color that I’m currently using. Now don’t despair if you don’t know which color code you want to use. Just download this free software program (I use the standalone zipped version that doesn’t require an installation) and drag the little eyedropper over to a color that you like and ouila!
So in my case the CSS style that I’m using looks like this:
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
background:#FDF3E1; }
Now do the same thing and scroll to the CSS style section where your own comments will go (you will find it close to the above code). It should look something like this:
.comment-body-author; {
Ok, now add the same CSS style as you did above but with a different color of course. In my case the color that I’m currently using is #E1EAFD, and it looks like this:
.comment-body-author {
margin:.5em 0;
padding:0 0 0 20px;
background:#E1EAFD; }
And that’s it! Hard eh? So why don’t you give it a try and add some pizazz to your blog with your own colorful comments.
More great reading:
- How To Search for Comments on Blogger
- Reward Blog Commentators with your Link Love
- A Better Way to Search for Comments
- The Easy Way to Add Trackback to Your Blogger Blog
.gif "tag dark blue(optima) Make Your Comments more Colorful! image"){kind=small}
Search tag: new blogger, wordpress, template, design, comments
Filed under: Blog Design Tips, Blog Tips, Blog Tutorials
What Next? Read More Tips From BLOGBloke:
Subscribe here to the Better Tips Newsfeed! 
Follow @BLOGBloke on Twitter for Social Media Tips & News!
Opinions? (click here to jump to the comments form)
Video
.gif){kind=small}
This is just what I was looking for. Thanks… Jason
[
Reply..]
I’m happy to see you’re out of the hospital and back to yer ol blogging tricks!
Nothing can keep ya down
Nary a frown
For it’s back to blogging ya go (sung with a merry whistle!)
The Best from Blondie
[
Reply..]
I love it!
Worked wonderfully…
Thanks much, Blog Bloke.
Paula
p.s. I hope your hospital thingee went well.
[
Reply..]
You’re welcome Paula. I had you in mind when I wrote it.
[
Reply..]
I’m missing ya Bloke! Twitter if you can! Sending you healing thoughts!
[
Reply..]
Good to see up and about blogging again. I’ve added you to our blogroll - you have a great blog.
[
Reply..]
Hi everyone!
I’ve been dwelling in the house of pain having complications from the surgery, and I have to go the hospital again tomorrow morning.
My computer also suffered a catastrophic crash that I haven’t had the strength to work on. I’ve set up another hard drive today but I’m so weak and the pain might keep me from blogging for awhile yet.
The good news is I’m alive and I’m hoping that I can crawl out of this hole soon.
It’s true when they say you can tell who your real friends are when you’re at your lowest.
I really, really miss all of you and being online blogging.
Cheers!
…BB
[
Reply..]
May you have a complete and speedy recovery.
[
Reply..]
We’re holding down the (blog) fort for ya! So glad you’re doing better. Too bad about your computer.
[
Reply..]
Tanks
[
Reply..]
I having a problem with the author color. Every comment is the same color, there is no distinction.
[
Reply..]
Curtis, make certain that your template has been saved after the changes. Sometimes if you’ve made an error with the syntax Blogger won’t let you save.
Try cutting and pasting directly from this post instead of keying it in.
After that, hit the refresh button on your browser (Ctrl-F5). If it still doesn’t show then keep fiddling with the code.
It will work, but be patient.
[
Reply..]
thanks for this great resource. i barely wait to do it myself. i’ve bookmarked it for future reference.
[
Reply..]
i think that will be great ! there will be more colors on the comment box !!
[
Reply..]
[…] […]