Highlight Authors Comment and Move the Comment Date

If you're one of those who changed your comment code to highlight the authors comment, here's what to do so you can change your comment section and to make it look better.

This is sort of extension of my post on how to position the comment date above the comment body. I assume that you use the Blogger Buster Code to highlight your comment therefore the code is quite different from my previous post. I made a few changes of the code, i added some style and move the delete icon and also move the comment date at the right side.

Reminder: please save a copy of your template.

Take it easier, we will just replace the code with a new code.

1. Go to your Dashboard - Layout - Edit Html
2. Tick the Expand Widget Template
3. Ctrl+F paste this code <b:loop values='data:post.comments' var='comment'>
4. highlight this code below and replace them with new code:

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>

<li class='author-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>

<div class='clear'/>

</li>


<b:else/>

<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>

Then replace them with this code below, where i have added a few styles and moved the comment date at the top right side of the comment body:

Do you Know that you can change the word "said..." to say "commented..." all you have to do is look for the word said... that i put inside from the code below and change them with any word you want -- be creative! :D

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>

<li class='author-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a> said....<b:include data='comment' name='commentDeleteIcon'/><div class='commentlink-date' style='float:right; margin: -15px 0 0 0;'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<p><data:comment.body/></p>
<div class='clear'/>

</li>


<b:else/>
<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a> said....<b:include data='comment' name='commentDeleteIcon'/>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<div class='commentlink-date' style='float:right; margin: -15px 0 0 0;'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<p><data:comment.body/></p>
<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>

Then Save.

Look at your comments and you will now see the changes.

If you want to place the other comments into border and style them aswell just add this CSS code for the General Comment and your done.

.general-comments {
background: #BFE4FF;
border: 1px solid #333333;
padding: 5px;
}

I hope you find this helpful and enjoy!