17 February 2013

Highlight Author Comment on Blogger

Highlight Author Comment on BloggerDo you have a blog?Yes sure you have and if you're getting good traffic on it then you must have some va;uable comments on your posts as well.Yes traffic means comments too.If you do receiving postive comments from your blog commentors then you must try to make your comment section more beautiful to attract more visitors for commenting.yes,why not?Every visitors love comments on their blog.So do you going for something spicy for your blog's comment section?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.

Highlight Blogger Auhor Comment

  • Navigate to Blogger Dashboard --> Template --> Edit HTML --> Proceed --> Search(ctrl+f) 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>

  • Now save the template and you're all done


  • 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. We 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. We have 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. we have 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:

If you want more choices of plain colors, use HEX code instead. We haveused a HEX code in the code above. 

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):


  • Padding:
We have included a padding in this code because we think without a padding, the border is too close to our comments. You can set the padding's value to 0 to see what we meant.

We think this will surely make your blog's comment system looks beautiful,If you wish to see a demo then check this blog's comment system.Hope you'll like it.

Articles You May Like

5 comments: Leave Your Comments

  1. Informative tutorial and really easy to follow. And yes, it gives a new look to the reader comments. Catchy!

  2. Replies
    1. Thanks for sharing your experience,keep visiting :)

  3. great your pictuur and your post i like it thanks for sharing.