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 Blaine and magda.
Go to Dashboard --> Template --> Backup/Restore --> Download Full Template --> Close --> Edit HTML --> Proceed --> Find for </body> --> Paste the following code directly above </body>.
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.
<script src='http://code.jquery.com/jquery-latest.js'/>The code in place:
<!-- 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 -->
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:.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. You can get the hex code for a given color from this useful site:.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. |
| 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 |
Category Article Comments, jQuery, Tutorial
