Highlighting Blog Author's Comment In A Diferent Color (For Blogspot)

You've probably been to some blogs with blog author's comments highlighted in a color different from other comments. This hack comes with some custom templates but most templates do not have it. Whether you're using one of those blogger classic templates or a custom one, you can have your comment highlighted in a different color as the blog author. You can check my reply on this blog post to see the demo. The steps below outlines exactly how I did it.


How To Highlight Author's Comment In A different Color For Blogspot

1. Log in to blogger and go to Design > Edit HTML

2. Click the box labelled Expand Widget Template

3. Press CTRL + F on your keyboard to search for this code:

]]></b:skin>

4. In the line just before this, paste this code:

.comment-body-author {
background: #D9E4EF;
color: #000000;
border: none;
padding: 5px;
}

You can style it better by changing the color codes in red to your own desired color. The color you define here determines the color in which the blog author's comment will be highlighted.

Here comes the last and tricky part of this. Most of the tutorials on the internet do not cover this well but I took the time to finally work it out for custom templates

5.a. Search for this this code:

<dd class='comment-body'>

Right above that, paste this:

<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<br clear='left'/>
<p><data:comment.body/></p>
</div>
<b:else/>

Now scroll a bit further down till you see this:

</dd>

Just below it, paste this:

</b:if>

The codes now should appear as shown below:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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'>
<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 class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

If you got that right, save your template and see your comments highlighted from other comments in a diferent color.

5.b. If you're using a different kind of template and couldn't find the code specified in step 5.a., find this one instead:

<div id='comment-body'>

Just above it, insert this:

<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<br clear='left'/>
<p><data:comment.body/></p>
</div>
<b:else/>

Scroll a bit further down till you see the closing div tag:

</div>

Just below it, paste this code:

</b:if>

When you're done, it should look as shown:


<b:else/>
<a class='comments-autor-name'> <data:comment.author/></a>
</b:if>
<a class='says'>says:</a>
</div>

<div id='comment-date'>
<span class='comment-timestamp'>
<a class='comment-permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>

<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<br clear='left'/>
<p><data:comment.body/></p>
</div>
<b:else/>

<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<div style='clear:both;'/>
<p class='comment-body' style='padding-right:10px;'><data:comment.body/></p>
</b:if>
</div>

</b:if>

</div>
</div>

</b:loop>
</div>
<div style='clear:both;'/>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>

Save your template and view your blog, you should now see your comments shown in a different color. If you have any question, you're free to use the comment form below.

---

Stay Connected With Free Updates

Subscribe via Email

---

Posted in: Blog Hacks,Blogger,Blogspot