Monday, December 1, 2008

How to Make Author Comment Have Different Color in Blogspot

Bloggers Tips

author commentIn general, any comments in the blog have the same color between comments from visitors and the owner of the blog. How about if we want to give a different color for the blog’s owner?. Giving a different color from blog’s owner can make comments more interactive

Ok, follow the tips below:

Note: Before you do the tips, its recommended to backup your template first

1. Login to blogger, then choose "Layout --> Edit HTML".
2. Tick mark the "Expand Widget Templates" box.
3. Go to your template code, and find the below code :

]]></b:skin>

4. Copy this script below and paste above ]]></b:skin>

.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; /* Position*/
}

5. Then find below 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>
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>



5. Add the red color text code to your script. Pay attention for the code position
6. Preview your template if its ok Save the Template.

*Note : You have to login into your blogger account before to give comments.

Related Topics:
How to Remove Underline below Text Link in Blogspot
How to add a PAYPAL DONATE button to your blog (Blogspot)
Optimize your Blog Title in Blogspot - SEO Title
How to Make Author Comment Have Different Color in Blogspot
How to Remove the Number of Label in Blogspot
How to use Strips Ad in Blogger
How to Hide / Remove Blogger Navigation bar

9 comments:

  1. blog yang sangat hebat!!!
    salute!!!

    apkah mau tukeran link dengan saya mas??

    ReplyDelete
  2. it is working thanks yaar...

    ReplyDelete
  3. Your blog failed to mention some important info which this other blog did mention: http://www.bloggerbuster.com/2008/05/how-to-highlight-author-comments.html#comment-form

    You didn't mention "Expand Widget Templates"--if this box is not checked, most people CANNOT find their comment code to edit it. Once I found this code, the rest was easy.

    ReplyDelete
  4. Hi Dura-Foam,
    about "Expand Widget Templates"..I already wrote about that in step number 2.
    Next time I will make it Bold..:)
    Thanks for comment

    ReplyDelete
  5. Good tips. Thanks. FYI, just joined with your MyBlogLog Community

    ReplyDelete