Add Different Background For Author Comments in Blogger

In this tutorial we will be adding a different background color to author comments in blogger comments 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.The authors comments can be highlighted very easily so that the admin’s comments can be differentiate from the readers’ comments.By using this blogger tutorial the border, background color or font color and size etc of admin comment box can be changed and redesign according to your needs. Blogger’s most awaited feature of threaded (Nested) commenting system.

As we know the most familiar comments system used in blogger field. You might have watched in many blogs around your browsing through internet. Let me quickly explain how about this author badge comment style is. When the blog author comments or replies using threaded comments then the comment is followed by a writer logo showing that the response was given by the writer you would definitely like this. Now start the tutorial and learn How To Change or Add Different Background For Author Comments in Blogger ?

How To Add Different Background For Author Comments in Blogger?

Step 1 – Go to Blogger Template >> Edit HTML.
Step 2 – By using search box,  Find </body> code.
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://3.bp.blogspot.com/-uo-TVu-F0J4/VP1iZhA-UnI/AAAAAAAAAZE/qqdRA58JCUc/s1600/How%2Bto%2Bhighlight%2Bauthor%2Bcomments%2Bin%2BBlogger.png”)’)
.css(‘color’, ‘#444444’)
.css(‘font-size’, ’12px’)
.css(‘padding’, ’10px’);
}
$(document).bind(‘ready scroll click’, highlight);
});
</script>

Possible Customization: