Make Your Comments more Colorful!
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.
BLOGBloke 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 the 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:
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:
margin:0 0 1.25em;
padding:0 0 0 20px;
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:
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:
padding:0 0 0 20px;
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.