Subscribe Here RSS or Email

9/21/08

Highlight Authors Comment and Move the Comment Date

4 comments Buzz Here
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!

Related Posts by Categories



4 comments:

bintang4 said... at 25/9/08 23:48

Thanks for this tutorial..
It's as simple as ABC..
Now I'm trying to figure out how to put back the myBlogAvatar.. ;)

tony dee said... at 28/9/08 04:50

thanks a bunch for the info on changing comment colors

Gaspare Messina said... at 20/2/09 03:16

Hi, i did this editing, it is ok, but permalink don't work more...

Any suggestions?
Thanks!

Post a Comment

I really love to read your thoughts, Reminder though that I Moderate my blog, If your intention is only to spam think twice.

For those that will comment because you want to share your thoughts i really appreciate your time. "Dofollow" Rules.

 

  © Blogger template 'tbn' by thebuzznutter 2008

Bring me to TOP