How to highlight author comments in Blogger

Highlighting author comments help readers differentiate them from readers’ comments. This is especially useful, for example, when a reader come back to check on a reply to his/her question. Highlighting your reply/answer, will make it easier to spot. Remember, making things easier for your readers is a good thing.

And in line with that statement, if you are using Blogger/blogspot, I’m going to make it easier for you to highlight your comments.

Most author-comments-highlighting tips attempt to highlight by changing the comment box background color. The code for this is actually quite simple, but to make it applicable to all blogger templates, that’s a bit complicated. This is because the codes for comments section varies –different class names, different id names or different way of styling.  And  to make it even worse, some templates don’t even have comment (display) box.

So, comments background color is out. What we  are going to highlight is what every comment section have –the comment itself. So we’ll be highlighting the comment text, not all, just the author’s.

Now let’s do this,

1. Login to your to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates checkbox on top right of the HTML window.
5. In the code window, look for this code:

   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p><data:comment.body/></p>
   <b:include data='comment' name='commentDeleteIcon'/>
   </b:if>

   The code responsible for displaying comments is <p><data:comment.body/></p> in line 4. (There is similar code in line 2. Leave that one alone, it’s for deleted comments.)

6. Now replace the code in line 4 with this (just copy & paste):

   <!--author comments highlight Start-->
   <!--http://www.bloggersentral.com -->
   <b:if cond='data:comment.author == data:post.author'>
   <p style='color: limegreen; font-weight:bold;'><data:comment.body/></p>
   <b:else/>
   <p><data:comment.body/></p>
   </b:if>
   <!--author comments highlight End-->

7. Here is the result, tested on this blog:
   The highlighting is applied by the <p style="color: limegreen; font-weight:bold;"> inline styling. You can style the text any way you want. For example, to italicize, just add font-style:italic. Separate each property with a semicolon.
   As for the text color, replace limegreen with your preferred color. You can use  CSS Colornames or Hex color code.  Hex color code must be preceded by a pound (#) sign, e.g. #FFD700.
8. Click Save Template.
9. Finish. Enjoy!

Do say something, please use the comments below.

 

Technorati Tags: comments highlight,blogger,blogspot