Add a Different Background For Author Comments in Blogger's Threaded Comments

In this tutorial we will learn how to highlight the author comments so that they will have a different background color, border, or anything that makes them stand out from the others. To achieve this, we need to add a code in the Blogger's template and to modify the style according to our preferences.

How to highlight author comments in Blogger:

Step 1. Go to Template, click on Edit HTML

Step 2. Click anywhere inside the code area and try to find - using CTRL + F keys - this tag:

</body>

Screenshot:

Step 3. Just above it, paste the following code:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Customizing the Author Comments:

Border:
The line marked in orange represents the border's style.
What it can be done:

• 1px - you can increase the value to change the border's thickness
• solid - change the border's style to dotted, dashed, inset, outset etc.
• #FFA500 - this is the border's color value, change it with your own color

Background:
The line marked in blue represents the background's style. You can use a plain color or an image. By default there's a combination of both (a white transparent image with a gray plain color).
To change/add:

• a different color: replace the #F1F1F2 value with your own (use this tool to find the hex code of your desired color)
• an image: replace the defaul url http://www.blogblog.com/1kt/transparent/white80.png with that of your image

Font Color:
To change the font's color, replace the #444444 color value in green with your own. (you can use this tool to find the hex code of your desired color)

Font Size:
Modify the value in red by increasing/decreasing the "12" value in order to change the size of text.

Step 4. Now Save your Template.