Highlight Author Comment on Blogger

Want to make your comment looks different from your reader comment?Then this is the perfect tutorial for you.Here we're going to share how to highlight author comment,by which your comment will look different from your blog readers.

How to Do This?

• Go to Dashboard --> Template --> Edit HTML --> Proceed --> Find for </body> --> Paste the following code directly above </body>.

<script src='http://code.jquery.com/jquery-latest.js'/>

<!-- ss highlight author starts -->

<script>

$(function() {

function highlight(){

$('.user.blog-author,.ssyby').closest('.comment-block')

.css('border', 'dashed blue 1px')

.css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')

.css('padding', '10px');

}

$(document).bind('ready scroll click', highlight);

});

</script>

<!-- ss highlight author ends -->

• save the template and you're done

Customization

• Border:To adjust your border, modify Line 7 in the code above:
  .css('border', 'dashed blue 1px')

1) You can change the style of your border. I have used a dashed border. Other options are (simply replace 'dashed' with one of the following words): solid, dotted, dashed, groove, ridge, inset, outset 

2) You can change the color to a different plain color. I've used blue in the code above. You can also use hex code for a specific color.

3) You can change the thickness of your border by adjusting the value 1px. If you want no border at all, you can set it to 0px.

• Background:

You can either use a plain color or an image as your background. I've used a combination of both (white transparent image with light pink plain color).

For plain colors without any image, replace Line 8 in the code above with this:

.css('background','red')

If you want more choices of plain colors, use HEX code instead. I've used a HEX code in the code above. 

.css('background','#F0A2A2')

If you want to use only a background image, replace Line 8 in the code above with this (also replace IMAGEURLHERE with the URL of your image):

.css('background','url("IMAGEURLHERE")')

• Padding:

I've included a padding in my code because I think without a padding, the border is too close to my comments. You can set the padding's value to 0 to see what I mean

I guess it'll make your blog's comment system looks beautiful,If you wanna see a demo then check this blog's comment system.Hope you'll like it.