How to Highlight Authors Comments In Blogger / Blogspot

How to Highlight Authors Comments In Blogger / Blogspot
How to highlight the author comments in blogger blogs. This will help to Commenters can find author comments easily with this hack. Blog Author comments are highlighted differently to normal style. Many blogger are using this hack in their blogs. No other plugins are needed. Using a small Xml template hack we can change style of author comments. Installing of this hack little bit difficult to other hacks.


How to Add this ?
There Are Two Steps For This Hack
  1. Adding CSS Code
  2. Adding Xml Code

First Step:-
Note: Backup your template before applying this hack

Second Step:- Adding CSS code
  1. Login to your Blogger Dashboard
  2. Select Design Section
  3. Choose Edit HTML tab
  4. Check Expand Widgets (i.e., Tick Expand Widgets check box)
  5. Find ]]></b:skin> Tag in Your template
  6. Add Bellow code Before it
.comment-body-author {
background: #CEF6E3;
border: 2px solid #FA5858;
padding: 5px;
}
#Change Background and Border Colors as you need

Now Save your template

Third Step:- Adding Xml Code
Add this code very carefully
  1. Find the following section of code in your template
  2. I am not sure the code exactly like bellow
  3. But <data:comment.body/> tag must present in code
  4. So Find <data:comment.body/> tag and then select entire code like bellow
<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>

After finding code successfully then Add Bellow code Before it

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

and Add bellow code After it

</b:if>

After adding Above two codes then
Save your template and check your Comments

Your final change in code like bellow
<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>


Any difficult to install this then don't hesitate to ask me via comments Your comments are always appreciated except spam.

13 comments:

Sarah said... July 23, 2010 4:19 PM

Very helpful tutorial—I suppose you could do the same thing using CSS in the b:if tags, though I haven't tried it for the author comments.

Fiance Visa said... September 27, 2010 1:31 PM

Very nice. You share a very informative article. It is very useful for me and many. Thanks for sharing.

Jeweled Chavon said... October 1, 2010 10:55 PM

I did this, but there is one comment highlighted and an identical comment below it not highlighted...I have two comments?

Duy Pham said... November 8, 2010 4:37 PM

Using
<b:if cond='data:comment.adminClass == data:post.adminClass'>
or
<b:if cond='data:comment.authorUrl == http://www.blogger.com/profile/ID'>

Wero M.M. said... January 11, 2011 3:28 AM

HOW CAN YOU DO THIS KIND OF EFFECT WHERE U CLICK ADD COMMENT AND IT BRINGS U DOWN RIGHT TO THIS BOX??????

Harish said... January 11, 2011 9:20 AM

@Wero M.M.
When ever you create a link We must use Url But here we use Unique CSS ID of Current Page. On click it will redirected to Unique CSS ID Area

For Suppose
<a href="#comment-form" >Add Comment</a> is "Add Comment"
Check Out This links
Go to Top
View Post
View Comments

Abhishek said... April 22, 2011 8:25 AM

Hey i successfully installed this code but the author name is not showing as like yours.

ankit said... June 12, 2011 7:39 PM

Please explain this in simple form i m bignner

Farmville Best Breeders said... June 22, 2011 8:27 PM

its not working for me

blue79blog said... July 12, 2011 10:11 AM

How to highlight at: Harish said as you?

Varinder Pal Singh said... August 2, 2011 10:17 AM
This post has been removed by the author.
Varinder Pal Singh said... August 17, 2011 8:12 PM

Thnxxx For this looking damn cool check out mine http://onsecrethunt.blogspot.com

جامع الحيان said... September 16, 2011 9:04 AM

its not working for me

Post a Comment

Drop Your Comments, Suggestions And Questions Below.
To Be Notified Of Replies Click The 'Subscribe By Email' Link Below The Comment Form.
Do Not Add Links To The Body Of Your Comment As They Will Not Be Published.

Copyright © 2011 All Rights Reserved - Privacy Policy / Contact Us / Sitemap

Blogger Template by Harish / Powered by Blogger