A author’s comment if has different background color, or different text style or even border, helps readers to easily locate what Author has to say if a question is asked in comments or even what he thinks of the comments coming.
This simple tutorial will help you achieve same and that too without any plugin used.
For WordPress Users:
Note: Do take backup of your theme before you try this.
01. Go to Appearance => Editor.
02. Then choose style.css file from right hand side and add below code:
03. Then choose comments.php file from right hand side and find below code:
And replace with
04. Save the files and you are done.
For Blogger Users:
Note: Do take backup of your template before you try this. Only try this if you are familiar with blogger codes.
01. Go to Layout => Edit HTML, click on Expand Widget Templates and find below code and add the codes which are in red in exact positions:
<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>
said…
</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>
02. Now put below code before ]]></b:skin> in your template:
background: #ebf4fb; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Position*/
}
03. Save Template. You are done.
If you are finding blogger code implementation hard, then try our Blogger to WordPress Service
References:
That concludes this simple and useful tutorial. Hope you like it.
If you enjoy this post, make sure you 
