Highlight Author Comments - Blogger

Here is another very nice Blogger Hack. By Applying this this trick your Comments will look different from Visitors Comments. Which will make your site look even more professional and nice.

You can customize the background/border color or even add an image to it.

How to Apply:
===========

* Login to Blogger -> Layout -> Edit html

* Search for ]]></b:skin>

<style>
.comment-body-author {
background: #E6F3F5; /* Background color*/
color: #000000; /* Text color*/
border-top: 1px dotted #E6F3F5;border-bottom: 1px dotted #6BB2FB;border-left: 1px dotted #6BB2FB;border-right: 1px dotted #6BB2FB;
margin:0;
padding:0 0 0 20px; /* Position*/
}
</style>

Note: You can change the background color according to your look by replacing the codes in bold. You can also increase the decrease the thickness which i have used is 1px.

Visit: Color html Codes

You can also add an image as background by just replacing:

background: #F5EDE3;
with
background: url(http://www.ImageLink.jpg);


* Now Find These Codes:

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

* Add the lines in bold.

* That's it! Always preview and then save it.

Note: The above codes might not exactly be the same but it should have these codes in between.
* <b:loop values='data:post.comments' var='comment'>
* <data:comment.author/>
* <data:comment.body/>


Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

Related Posts

5 comments: on "Highlight Author Comments - Blogger"

Vinayak said...

it looks a little risky
i will not try it but still good one

Dan* said...

@ Vinayak

Risky not at all, if you preview it first. If there is any error the page will not open and everything remains undo.

If the page opens it means everything is fine and now you can save it.

Alishah said...

nice technique ..... :) i will try this one

All Pc Tips said...

nice info.............

asit dhal said...

good technique...but it's only a piece of CSS.

I mostly use such kind of scripts to insert color in my blog.

Post a Comment