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

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.


This Is Posted Originally in
http://www.doncaprio.com/2011/11/highlight-add-color-author-comment.html