| 2 comments ]

This tutorial is to highlight author comment, make it different from visitor's comment. It is very useful and interesting tricks. Below is the example of how it will look like.


http://1.bp.blogspot.com/_xn2gmPb9TfM/SDSHJY3h6eI/AAAAAAAABdY/Wz5vno10JXU/s400/author-comment-highlight.gif

Image credit to bloggerbuster.com
Let's start this trick.

 
01. Login to blogger
02. Layout > Edit HTML > Backup templates
03. Click Expand Widget Templates box
04. CTRL+F ]]></b:skin>
05. Copy codes below and put it above the code in 04.
.comment-body-author {
background: #E6E6E6; /* 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; /* Posotion*/
}

06. You may change #E6E6E6 to any other color. Check it HERE (COLOR HEX)
07. Then find the code below.
<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>
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>

08. You MUST ADD the red color code as shown below into your HTML at the right position
09. Save your template
10. DONE

Do leave me feedback :)



2 comments

maisyah said... @ September 1, 2010 at 10:13 PM

hello..
i already tried this ;tutorial but..its not work. Maybe the HTML of comments-block from ur tutorial not same as mine?
what to do??

admin said... @ September 2, 2010 at 2:36 PM

Have you try all of the instructions? what to add, what to remove. sometimes the tricks might not works due to the templates used.

Post a Comment

Related Posts with Thumbnails