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 
hi. how would u do that in twitter.?
Very useful Tutorial dude… would like to see more of them
Thanks for your comment bro.
Not sure buddy.
hi. how would u do that in twitter.?
Very useful Tutorial dude… would like to see more of them
Thanks for your comment bro.
Not sure buddy.
Nice one Bro
Just what I need 
Thumbs up 
Nice one Bro
Just what I need 
Thumbs up 
i couldn't find the code u mentioned in comments.php. the theme i am using is Mystique. Does it exactly have to be the same code??
i couldn't find the code u mentioned in comments.php. the theme i am using is Mystique. Does it exactly have to be the same code??
Nice tut. Super simple. Thanks!
Nice tut. Super simple. Thanks!
That is a pretty useful tip. Now we can add some spice to the mundane cookie cutter author comments
That is a pretty useful tip. Now we can add some spice to the mundane cookie cutter author comments
Thanks for the great tut
Thanks for the great tut
Glad you like it.
Glad you like it.
I cant seem to get this to work in the Mystique theme.Please help!!!
I cant seem to get this to work in the Mystique theme.Please help!!!
Can you show me where?
Can you show me where?
Same here
Same here