01 August 2011

How to Emphasize Your Comments on Your Blogger Blog

I'm always looking for ways to improve my blog.  One thing I've been wondering how to do is make my own contributions to the comments section stand out.  For example, let's say one of you lovely readers asks me a question.  You'd like to be able to easily skim through the comments to find my answer, right?  So how could I make my comments look different?

I found this tutorial, How to Highlight Author Comments in Blogger, from SimpleBloggerTutorials.com, and it worked!  (Sometimes I find html-related tutorials that don't work...but it's probably just my inexpertness in html.)

Okay, so just click over to SBT's tutorial, then meet me back here, and I'll teach you some ways to customize how your (and your readers') comments look.

...

...

Good, you're back.  :)

So, if you follow SBT's instructions exactly, you get this:


If this fits the look of your blog, then you're done!  But if you'd like to tweak it a bit, read on...

(This is the second bit of code that the instructions have you paste into your blog template.)

.comment-footer{
margin-bottom:0 !important;
}

.author-comment{
background-color:#F0FFF0;
 <--Background color.  Bet you guessed that already.
padding:5px;  <--  Has to do with the space around the comment.
margin-bottom:1.5em;  <--  Similar to padding.
border:1px solid #ccc;  <--  Border thickness, style, and color
border-radius:10px;  <-- This is what makes the corners rounded.
}
.author-comment.blog-author {
background: #FFEBCD
<--  This is the background color for your comments.  url(https://lh3.googleusercontent.com/_-BRP4LFLyWc/TZX3b7r2AyI/AAAAAAAAATY/8Am8ri02OjE/s800/admin.png) no-repeat right top;  <--   The url is a direct link to the crown image.  
}

The text in blue applies to all comments on your blog.  The text in red applies to your (the author of the blog's) comments only.

If you'd like to change the background color (for all the comments, or just for yours), just change the appropriate number.  Click here for a list of web colors.  Or, if you use Photoshop, open an image that has a color you'd like (for example, if you'd like to use the same color as your custom navigation tabs you rushed off and made after reading my tutorial about it, you would open that image).  Open the Color Picker, use the Eyedropper tool to select your color, and Photoshop will tell you the number right there.


If you'd like to change the border, click here for css coding for different border styles.  If you'd like to change the rounding of the corners, click here to find out how.  If you want to remove the border entirely, simply delete the code for the border.

Here's how I customized my code:
.comment-footer{
margin-bottom:0 !important;
}
.author-comment{
padding:5px;
margin-bottom:1.5em;
}
.author-comment.blog-author {
border-style:double;
border-color:#fc8700;
}

And this is what I got:

Have fun making your blog exactly the way you want it!  Let me know if you have any questions!




2 comments:

  1. i have got to do this!
    thanks for the tip, and thanks for the sweet comments over at my blog!

    {love} lauryn @ lovenotesbylauryn.blogspot.com

    ReplyDelete

Thank you for your comment! I love to hear from you--your comments make my day!

I've been getting a lot of spam comments lately, so I'll not be allowing anonymous comments for the time being. Sorry to any legitimate anonymous commenters!