Highlight Author Comments in Blogger's New Threaded Comment System

Still psyched about Blogger's new threaded comment system? Not really? Well, here's something to boost your spirit. In the old system, I used to have a way to highlight author's comments - you know, so that my comments stand out from my readers' comments. Unfortunately, with the release of the new threaded comment system, that tutorial got obsolete. So I dug further, and came up with a way to do the same in the threaded system. As a bonus, this tweak automatically highlights non-threaded old author comments as well! This is a response to blog readers.

Go to Dashboard --> Template --> Backup/Restore --> Download Full Template --> Close --> Edit HTML --> Proceed --> Find for </body> --> Paste the following code directly above</body>.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

The code in place:

You're basically done. If you want to personalize the highlight's design, see some of the options I've included below. If you have a specific design in mind, and you can't achieve it with the options I've given below, feel free to leave a comment and I'll let you know if and how it can be done.

Personalization: 

Border	To adjust your border, modify Line 7 in the code above: ? 1 .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: ? 1 .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. You can get the hex code for a given colorfrom this useful site: ? 1 .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): ? 1 .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.
Comment Font Color, Size and Type	To adjust comment font color, size and type, refer to my previous tutorial. Change Blogger Comment Font, Size and Color

You might also like: