Tipsberonline: Making Auto Highlight Author Comments In Blogger

Making Auto Highlight Author Comments In Blogger - How to highlight author comments in blogger blogspot? Make different looks beetween comments given by an author and the visitors can be more interesting than the same looks of each.

We can know the difference of which one the author's comments and which one the visitors comments.

In this blogger guide will tell you how to highlight author comments in the comments section of blogger posts automatically. For the demo, you can see my comments on each my blog posts that already have comments.

I have tested this Blogger hack on this blog and according to the source of this blogger hack, this also works on both old generation of Blogger templates (Minima and Sand Dollar) and the latest generation of default Blogger templates, e.g. Simple. It will also work on customised templates as the comments code is likely to be very similar.

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

Login to Blogger
From the Dashboard go to Design > Edit HTML
Back up your template by downloading it to your computer
Check the Expand Widget Templates checkbox on the top righthand side
Use CTRL + F by entering the following into the search box
<dd class='comment-body'>
Immediately above this line paste the following code:

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

<data:comment.body/>
</dd>
<b:else/>
Now look for the following code

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

then paste this code:

</b:if> immediately after it.
Your code should now look like this one:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl
expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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'>
<data:comment.body/>
</dd> <b:else/>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/>
 <data:comment.body/>

</b:if> </dd>
</b:if>

</dd>
<dd class='comment-footer'>

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>

</dd>
</b:loop>
</dl>
</div>
Now using CTRL + F again find this code ]]></b:skin>
Copy the following code:

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

Then paste the code before this ]]></b:skin>
Save your template

Now click on View Blog and go to a post that you have commented on to see the CSS styling has highlighted your comments.