How to Highlight Author’s Comments in Blogger

Author's comments
Imagine this...

You and I have same name (let it be Mathew Stephen) and I started commenting on your blog regularly creating an ambiguity about the author among your readers.

What will be your next step? Going to kill my comments from your blog?

You're going to kill my comments means you're going to stop me from visiting your blog. i.e you're going to lose a damn active visitor...

So what's the perfect solution?

Simple... you've to make your (author's) comment highlighted.

Understanding the Blogger Comment Block


Before you go further, it will be better If you could understand the comment block. By default, the blogger comment block is the portion excluding the avatar section of a comment. Primarily, it is divided into three sections.
  1. comment-header
  2. comment-content
  3. comment-actions
The below image will give you a clear idea about the same.

comment block
This is how CSS classes are distributed in blogger comments. Also the comment block along with the avatar have  a class 'comment' assigned to it.

Adding a CSS Class to Author's Comments


Blogger by default generates a span tag with the class '.icon.blog-author' in the comment header (between name and date) for the author's comments. However, that is not enough to style the whole comment block. So, we are going to exploit that span tag by using JavaScript. Using JavaScript, the closest comment-block (CSS class) to the CSS class .icon.blog-author is fond out and a separate class author-comment is added to the same. Follow the below steps to add the JavaScript.

Step 1: Go to your blogger dashboard > Template > Edit HTML.
Step 2: Using Ctrl+F, search for </body> and paste the below code above it.

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.user.blog-author&#39;).closest(&#39;.comment-block&#39;).addClass(&#39;author-comment&#39;);
});
</script>
That's it, now a class author-comment is added to the comment-block of the author's comments. In the next part we are going to style the comment block of the author's comments by using CSS.

Highlighting Author's Comments (in Blogger)


Now, the author's comments have a CSS class author-comment assigned to it. Furthermore, it is super easy now to make it highlighted.

Here are some samples, so that it will be much more easy for you to decide and add the one you like the most.

1. Changing the Background Colour of Author's Comments


To change the background colour as it is seen in the picture, search for ]]></b:skin> in your blogger template and paste the below code above it.
.author-comment {
    background: #F0A2A2;
    padding: 10px;
}

2. Adding Border to Author's Comments


To get something like what is seen above, search for ]]></b:skin> in your blogger template and paste the below code above it.
.author-comment {
    border: 3px solid #e18728;
    padding: 10px;
}
Also make sure, you use a colour which best suits your blog's overall colour schema.

Now your visitors can easily distinguish your comments from other comments without losing any time. Hope you liked the exploit. If you faced any difficulty while adding the codes, please let us know it through the comment box below. We are always happy to help.

8 comments... add one

  1. Thanks for the informative post #Mathew, i do appreciate the concept since am a blogger as well. thanks again.

    ReplyDelete
  2. Cool and easy. But why you are parsing even - ' - (quote) in code? I don't think it needs to be on blogger. Is it?

    ReplyDelete