How to Highlight Author Comments in Blogger

This originally appeared as a guest post on My Repurposed Life! I’m reposting it  in case you missed it.
_________________________________________________________
I am something of a tinkerer. I like to figure out how things work. This is especially true when it comes to blogs. As I tour through Blogland, I see things I like and I try to figure out how to do it. A few months ago, I found a blog where the author’s comments were in a different color than the other comments. I liked that look and wanted to do.

I tried out a couple of the comment gadgets that are designed to do a similar thing, but I found my blog slowed way down when I used them. I wanted another solution.

I went looking around and I found some tutorials that were written by people who assume you have a basic understanding of HTML and all that fun, technical mumbo-jumbo. It’s all I can do to keep my eyes from glazing over and rolling back in my head as I try to read those type of blogs.

Since Gail asked me how I did this on my blog, I thought I’d save you from the Geek Speak and show you how you can do this for your blog.

Back Up Your Blog
For the sake of your sanity, be sure to back up your blog BEFORE you make any changes. If you’re like me, you’ve probably done some customizations and tweaking of your blog. You don’t want to loose all your customizations. Also, as a best practice (that’s Geek Speak for “Good Idea”), you should back up your blog on a regular basis. I try to do it every time I do a new post.

Go to your Dashboard in Blogger.

For the life of me, I can’t figure out why Blogger has decided to place the Delete Blog and Export Blog links so close together. Whatever you do, don’t click the Delete Blog button!

It will automatically save in your My Documents>Downloads folder. You can move it into another folder after the download, if you want. I just leave mine in my downloads folder.

Get Color Codes

You need to figure out the HEX Codes for the colors you want to use. For this tutorial, we will  not be changing the comment text color. The comment color is the same as your post text color. You need a good contrasting color for the background and for the border. I used a light gray (#dddddd) for my background and a red (#771100) for the border.

The easiest way to find the color codes you want is to use the Template Designer. Since I’m helping my sister get her blog up and running, I’ll be using her blog for the rest of the tutorials.

 

Select the Template Designer and go to the Advanced option.

Some of the tutorials I’ve seen on this state that each template has slightly different coding. Miss Jenn’s blog is using the Picture Window Template.
Under the Advanced Section, click on the Links option, and three boxes come up with colors and HEX Codes.

Template Designer shows you the colors that are a part of your particular template, and it also recommends some other colors for you. If you click on one of the colors, you’ll see the HEX code as I circled in the above photo.

Write down the HEX code for the background and border color you’d like to try. I would suggest a slightly lighter or darker background than your regular post background, and a coordinating color for the border. You might want to write the codes down for a couple of options to play around with them and see how you like them later on.

NOTE: Before you leave this section, make sure the colors in each section are the actual colors you want applied to the links. If you can’t remember the original colors, you can go Back to Blogger which will erase any changes you’ve made.

Add CSS Code

While we are still in the Template Designer, let’s go ahead and add the first and easiest part of the new code. Scroll down to the bottom from the Links option and find the Add CSS option.

image

Click in the white box in the Add CSS area and paste in this code:

Replace the HEX codes in this code, with the codes you selected and wrote down. Be sure you have the ; after the HEX code.
 

Apply To Blog, to save the changes you’ve made and then go Back to Blogger to exit out of the Template Designer.

Edit the HTML Code

Here’s where it gets a little tricky, as we need to edit the HTML code. Be sure to check the box to Expand Widget Templates.

Next, you want to search for the section of code that looks similar to this code:
 

I say, “similar” because with the differences in templates, your code may not look EXACTLY the same as this code. As long as you see the sections I’ve highlighted below, you’re in the right spot. 


If you’re having trouble finding the section of code, try searching (Ctrl + F) for the text I highlighted below. You can copy it from the above box.

Follow the instructions in this picture.

New Code #1
Put this code after the line. The easiest way to do it is to just copy the whole section and paste it in. 

New Code #2 
Put this code after the line. Again, highlight, copy (Ctrl+c)paste (Ctrl+v) in the code.

After you paste in the new code, Save Template, and trust that the code works.
If Blogger lets you save it, you can assume the code was entered correctly.
 
NOTE: I’d love to tell you to Preview it before you save, but you can’t actually see the comment section when you’re looking at the Preview screen. In this case, Preview doesn’t do you any good. You have to Save Template to see if it worked.
If it didn’t, this is why we backed up our blog before we started. 😀
 
If you did it right, you’ll see your comments are now all highlighted, like so (remember, this is my sister’s blog so Miss Jenn is the author, not Suesan):

Okay, so maybe that whole conversation was just me, but still, Miss Jenn totally approved of it! Go ahead, ask her. She’ll gladly tell you how awesome I am, that I am a great sister how much she likes her highlighted author comments.

I hope this helps you highlight your comments to let your readers better see  your responses to their comments and questions.

Thanks for letting me share today, Gail!

Suesan

Thank you for reading Frou-FruGal. For more projects, please click to my site, http://froufrugal.blogspot.com
Author: