How to Highlight Author Comments in Blogger Posts

How to Add CSS Styling to Author Comments in a Blogger Post
The following instructions will highlight author comments in the comments section of a Blogger post. The code creates a shaded box around the comments made by the blog author. These changes will not affect the CSS the styling of any of the other comments made.

Instructions to Add CSS Highlighting to Author Comments in Blogger

1. Login to Blogger
   
2. From the Dashboard go to Design > Edit HTML
   
3. Back up your template by downloading it to your computer
   
4. Check the Expand Widget Templates checkbox on the top righthand side
   
5. Use CTRL + F by entering the following into the search box
   
   

   <dd class='comment-body'>

6. Immediately above this line paste the following code:
   
   

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

7. Now look for this code block
   
   

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

   
   and paste </b:if> immediately after it.
   
8. Your code will now look like this:
   
   

   <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
   <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
   <b:loop values='data:post.comments' var='comment'>
   <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
   <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
   </b:if>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
   </b:if>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>
   </dt>
   
   
   <b:if cond='data:comment.author == data:post.author'>
   <dd class='comment-body-author'>
   <p><data:comment.body/></p>
   </dd>
   <b:else/>
   
   <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
   <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>
   
   </dd>
   <dd class='comment-footer'>
   <span class='comment-timestamp'>
   <a expr:href='data:comment.url' title='comment permalink'>
   <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
   </span>
   </dd>
   </b:loop>
   </dl>
   </div>

9. Now using CTRL + F again find this line ]]></b:skin>
   
10. Paste the following immediately before ]]></b:skin>
    
    

    .comment-body-author {
    background: #f5deb3;
    border: 2px solid #de7008;
    padding: 5px;
    }

11. Save your template changes
    
12. Click on View Blog and go to a post that you have commented on to see the CSS styling has highlighted your comments