How to Highlight Blog Author Comments in Blogger

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

Do you see your own comments hidden with other comments on your blog? What if you want to highlight your own comments and let your readers know quickly what have you responded? Will not it be cool?
Lets get on with the tutorial straightaway.


As usual login into your Blogger Dashboard > Design > Edit HTML and check the "Expand Widget Templates" option.

Important Step: Now as a precautionary measure please download your template so that you have an emergency backup if in case you create any errors.

Then, find (CTRL+F) this code in the template.

]]></b:skin>

And immediately before it, paste this code:

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

Now you have to go to the comment section of your blog. Please note the code may vary for each template so try to find a similar code.

search for the following lines of code.

<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>

You have to add Blue codes in your html in the way i have shown above between the codes.I hope you will be able to do it.

Now how to style the comment part.
1. background: #ffffff; can be replaced by background: url(http://link_of_your_image.jpg) ;
2. change the border by setting it as higher value if you need a thicker border or make it as 0px if you don't need it. ( border: 2px solid #666666; )