Highlight Author Comments in BlogSpot/Blogger Comment Section

Obviously, the main purpose of this trick is to make your author comments differ from your visitor's comments. You make your comment in one color and your visitor's comments in another color. It will make your blog more interesting and nicer. You can try to check it out on my blog by commenting this post. It is very easy to achieve with CSS rule and if statement. The following instruction will show you how to do it.

1. Login to your account.
2. Click on Design.
3. Click on Edit HTML
4. Click on "Download Full Template" to backup your template.
5. Check "Expand Widget Templates"
6. Search for

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

7. Replace it with the following code

<b:if cond='data:comment.author == data:post.author'>
 <dd class='comment-author-wrapper'>
  <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
   <p><data:comment.body/></p>
  </b:if>
 </dd>
<b:else/>
 <dd class='comment-body'>
  <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
   <p><data:comment.body/></p>
  </b:if>
 </dd>
</b:if> 

8. Search for

]]></b:skin>

9. And add the following code before it

.comment-author-wrapper{background:#000099; border:1px solid #000099; padding:0.5em; margin-bottom:5px}

10. Save your template, and you are done.

The CSS code may be tricky for you. You may have to modify that code to make it work with your template. Remember to change the color in the red color above. If you are not able to do it, let me know. I'll try to help you out.

To support multi-author blogs, please follow instruction in Highlight Multi-author in Blogger/BlogSpot Comment Section post instead of this one.

If you see my post interesting, please comment. I will post more trick for Blogger/BlogSpot:-).