How to highlight author comments in Blogger

highlighting author comments Highlighting author comments help readers differentiate them from readers’ comments. This is especially useful, for example, when a reader come back to check on a reply to his/her question. Highlighting your reply/answer, will make it easier to spot. Remember, making things easier for your readers is a good thing.

And in line with that statement, if you are using Blogger/blogspot, I’m going to make it easier for you to highlight your comments.

Most author-comments-highlighting tips attempt to highlight by changing the comment box background color. The code for this is actually quite simple, but to make it applicable to all blogger templates, that’s a bit complicated. This is because the codes for comments section varies –different class names, different id names or different way of styling.  And  to make it even worse, some templates don’t even have comment (display) box.

So, comments background color is out. What we  are going to highlight is what every comment section have –the comment itself. So we’ll be highlighting the comment text, not all, just the author’s.

Now let’s do this,

  1. Login to your to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Tick the  Expand Widget Templates checkbox on top right of the HTML window.
  5. In the code window, look for this code:
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    <b:include data='comment' name='commentDeleteIcon'/>
    </b:if>

    The code responsible for displaying comments is <p><data:comment.body/></p> in line 4. (There is similar code in line 2. Leave that one alone, it’s for deleted comments.)

  6. Now replace the code in line 4 with this (just copy & paste):
    <!--author comments highlight Start-->
    <!--http://www.bloggersentral.com -->
    <b:if cond='data:comment.author == data:post.author'>
    <p style='color: limegreen; font-weight:bold;'><data:comment.body/></p>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    <!--author comments highlight End-->
  7. Here is the result, tested on this blog:author comment highlight
    The highlighting is applied by the <p style="color: limegreen; font-weight:bold;"> inline styling. You can style the text any way you want. For example, to italicize, just add font-style:italic. Separate each property with a semicolon.
    As for the text color, replace limegreen with your preferred color. You can use  CSS Colornames or Hex color code.  Hex color code must be preceded by a pound (#) sign, e.g. #FFD700.
  8. Click Save Template.
  9. Finish. Enjoy!

Do say something, please use the comments below.

 

78 comments to "How to highlight author comments in Blogger"

- c H i E n - June 14, 2009 at 5:26 PM    

Woah thank you! I was looking for this!

Greenlava June 14, 2009 at 7:39 PM    

You're welcome. I'm happy to see it in action on your blog.
Come again for more tips.

░♥si lampu neon♥░ June 15, 2009 at 9:20 PM    

cant do it. zzz. tried about 3 times. doesn't work for me.

Greenlava June 15, 2009 at 10:02 PM    

Hi ░♥si lampu neon♥░,
I guess your 4th try works :). I see it working in your blog.
Thanks for dropping by.

Andrea July 1, 2009 at 7:24 PM    

Thanks for this, it worked like a charm!

Greenlava July 1, 2009 at 9:39 PM    

My pleasure Andrea.

Pushpinder Singh Bagga October 1, 2009 at 5:20 AM    

thanks... this helped. Cheers !

Greenlava October 1, 2009 at 8:56 PM    

You're welcome Pushpinder Singh Bagga.
Stick around for more tips and hacks.

Khairi November 13, 2009 at 9:29 AM    

Thanks. it's great (meme ganah)

Greenlava November 13, 2009 at 2:23 PM    

Khairi,
Glad you like it. Beyeh

Kelly November 22, 2009 at 5:26 AM    

I have not been able to get this to work. I am having a very hard time to a lot of thing to work with my template. I did get the numbering to work though.

Kelly November 22, 2009 at 5:32 AM    

never mind I did get it to work. I was looking at a post that I hadn't commented on.

TheShadow November 30, 2009 at 9:58 PM    

Thankyou
http://mobilethemesworld.blogspot.com/

Angel December 29, 2009 at 8:08 PM    

Wow, thank you so much...

Greenlava December 30, 2009 at 2:51 AM    

Kelly, TheShadow, Angel,
You're welcome...

Remodelaholic February 7, 2010 at 12:15 AM    

Thanks again, You are really teaching me how to do this whole html thing... Or at least to feel like I know what I am doing! so thanks!

Amar V March 18, 2010 at 4:03 AM    

Many many thanks for the post. I was tired looking for the solution & finally I stumbled upon this post.

I just saw "Now It's Your Turn To Say Something" above the comment box. Can you reply how to to do it so that I can customize my own message.

Thanks & Regards

Amar V March 18, 2010 at 4:25 AM    

hey, it is me again. i found the solution for my previous question.

thanks & cheerss

Greenlava March 19, 2010 at 2:00 AM    

@Remodelaholic
My pleasure.
Nah...HTML is not that hard to begin with. Those remodeling thing you do, now that is something

@Amar V
Don't orget to come back.

cait April 21, 2010 at 8:35 AM    

I looked all over and couldn't find this. Thanks so much for such great info!!

www.cait-theblessedlife.blogspot.com

Greenlava April 21, 2010 at 12:26 PM    

@cait
You're welcome. Next time come here first :)

Jessica May 28, 2010 at 3:49 AM    

I changed the code, and my comments as the author don't display any any changes, but are working fine.
Do some templates just not allow the highlighting?

Greenlava May 28, 2010 at 4:43 PM    

@Jessica
It's working...but you I see numbers 1236...78.
You don't want that, lose the numbers by clicking the <> icon on top right corner of the code, a window will pop up, copy the raw code from there.

Shel at Dreamy Nest July 14, 2010 at 9:18 PM    

Thank you so much for all the tips & tricks.
Is there another color we can use besides limegreen? I've tried changing to pink, green, olive, etc and it doesn't show any changes.

Greenlava July 14, 2010 at 10:09 PM    

@Shel at Dreamy Nest
Refer to CSS Colornames for a list of color names and their equivalent hex codes.

Shel at Dreamy Nest July 15, 2010 at 12:41 AM    

Thank you Greenlava.
I've fixed the code using both the hex values AND the name of the color and I still can't get it to work. What am I doing wrong?
I've substitued the word IndianRed with it's hex value of #CD5C5C too. No luck.
Tried posting the code and couldn't.

Greenlava July 15, 2010 at 1:10 AM    

@Shel at Dreamy Nest
To post your code here, replace < and > symbols with [ and ].

Shel at Dreamy Nest July 15, 2010 at 1:37 AM    

Ok - thanks, Greenlava:

[b:if cond='data:comment.isDeleted']
[span class='deleted-comment'][!--author comments highlight start--]

[!--http://bloggersentral.blogspot.com --]

[b:if cond='data:comment.author == data:post.author']

[p style='color:#CD5C5C; font-weight:bold;'><data:comment.body/][/p]

[b:else/]

[p][data:comment.body/][/p]

[/b:if]

[!--author comments highlight end--]
[/span]

Greenlava July 15, 2010 at 8:18 AM    

@Shel at Dreamy Nest
I see the problem now. Your styling applies to deleted comments! :)
Your original code (before adding the hack) should be like so:
[b:if cond='data:comment.isDeleted']
[span class='deleted-comment'][data:comment.body/><b:include data='comment' name='commentDeleteIcon'/]
[/b:if]

you applied the code to the first comment.body, which is for deleted comment.
The correct one is the second comment.body, the one enclosed in [p][/p] tags.
p.s. I'm revising the instructions, to make it clearer.

Shel at Dreamy Nest July 15, 2010 at 9:46 AM    

Thank you so much! I just tried fixing it and apparently I've goofed my whole coding up in the comments section. I also tried adding numbering and the hack to add more than 200 comments. Yup, I've created a mess. My fault entirely. I am code-challenged. Sorry. I'll see if I can figure out how to fix it all and start over later.
Your instructions are awesome!!!! I love this place!!! Thank you!!

John September 5, 2010 at 5:05 AM    

Works like a charm =).

Mon September 10, 2010 at 3:39 AM    

this is the simplest author highlight i've come across. thanks so much.

Sandy at Teacup Lane October 13, 2010 at 3:53 AM    

Works great! Thank you!

Greenlava October 13, 2010 at 3:30 PM    

@John
@Mon
@Sandy at Teacup Lane
You're welcome. Thanks you for the feedbacks :)

raj October 29, 2010 at 3:40 PM    

hey greenlava it did not work for me proper......i posted ur code but whn i try publishing the comments, the user comment half went...and wht ever reply in comment i posted came twice ...so this is the problem what to do......

Greenlava November 2, 2010 at 5:59 PM    

@raj
You have to REPLACE the existing code with the code in step 6.

.::: Princess MOMOY :::. January 20, 2011 at 5:37 PM    

hi
i can find
the code
in my html

Greenlava January 21, 2011 at 8:23 PM    

@.::: Princess MOMOY :::.
Have you ticked the Expand Widget Templates checkbox?

Selina Loves Love February 15, 2011 at 8:37 PM    

Hello, my comments are now showing twice. Once in green, then in black. How do I fix this problem? thanks

Greenlava February 15, 2011 at 11:53 PM    

@Selina Loves Love
It looks okay now.

Billy February 26, 2011 at 10:29 PM    

This is great - it's the least complicated one I've found and works even if you're using a third-party template because you're only replacing a single line of code.

One question, though. I'd prefer to highlight the author's NAME rather than the comment itself. Could this be tweeked to do this?

Greenlava February 28, 2011 at 10:47 PM    

@Billy
Instead of [p][data:comment.body/][/p], you want to apply the changes to
[a expr:href='data:comment.authorUrl' rel='nofollow']

Billy February 28, 2011 at 11:30 PM    

Thanks, Greenlava!

Billy February 28, 2011 at 11:52 PM    

Sorry to mither, Greenlava, but when I try to do as you instructed I get the dreaded error message "Template cannot be sparsed properly. must be closed with the relevent closing tag"

I put the block of code in the new place, but surely the instances of in that code should be replaced with too?

Anyway, no matter what I do my template doesn't seem to like where I'm trying to put it. Any ideas?

Greenlava March 1, 2011 at 1:02 AM    

@Billy
Did you not replace [ and ] with < and >?

Billy March 1, 2011 at 8:22 AM    

Thanks for your patience, Greenlava. I didn't really need to replace [ and ] with < and > because all I was doing was replacing the [a expr:href='data:comment.authorUrl' rel='nofollow'] line with your original block of code (which already uses < and > ).

Let me just go through this again. Are you saying that to highlight the author's NAME as opposed to their actual POST, I need to replace: [a expr:href='data:comment.authorUrl' rel='nofollow'] with that block of code in step 6 from your original instructions?

I did this, and had no instances of [ and ], but I still got the 'template cannot be sparsed properly' message.

Greenlava March 1, 2011 at 10:25 PM    

@Billy
Replace this:
[a expr:href='data:comment.authorUrl' rel='nofollow']

with this:
[b:if cond='data:comment.author == data:post.author']
[a style='color: limegreen; font-weight:bold;' expr:href='data:comment.authorUrl' rel='nofollow']
[b:else/]
[a expr:href='data:comment.authorUrl' rel='nofollow']
[/b:if]

Billy March 1, 2011 at 10:47 PM    

Nope. So sorry, Greenlava, but that still didn't work. I replaced all the [] with the correct morethan/lessthan symbols, but I'm still getting this error message:

"Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: Element type "a" must be followed by either attribute specifications, "morethan" or "/morethan>". (the code obvioulsy doesn't say "morethan", but as you know those symbols don't show up in comments)

I tried closing the a tag with the relevent closing tag as instructed, but still got the error message.

Never mind, you've wasted enough trying to help me now. It must be because I'm using a third party templte.

Thanks for all your help.

Greenlava March 2, 2011 at 2:36 AM    

@Billy
My bad. I left out the data tag. I was looking at my heavily tweaked template :)
Let's start over...
Replace this:
[a expr:href='data:comment.authorUrl' rel='nofollow'][data:comment.author/][/a]

with this:
[b:if cond='data:comment.author == data:post.author']
[a style='color: limegreen; font-weight:bold;' expr:href='data:comment.authorUrl' rel='nofollow'][data:comment.author/][/a]
[b:else/]
[a expr:href='data:comment.authorUrl' rel='nofollow'][data:comment.author/][/a]
[/b:if]

Billy March 2, 2011 at 4:26 AM    

YAY!

Thank you so much, Greenlava! You've been incredibly patient and helpful :)

Billy March 2, 2011 at 4:26 AM    

Now just to lose that awful limegreen ;)

It's okay, I know how to do that :)

Billy March 2, 2011 at 4:35 AM    

Oh, Crap!

I've just noticed that this changed the color of my (author) name, but that it completely deleted the name of the other commentors??

This is the comment code as it stands since applying your latest changes.

--------------------------------------
[b:if cond='data:comment.authorUrl']
[b:if cond='data:comment.author == data:post.author']
[a expr:href='data:comment.authorUrl' rel='nofollow' style='color: #000099; font-weight:normal;'][data:comment.author/][/a]
[b:else/]
[a expr:href='data:comment.authorUrl' rel='nofollow'][data:comment.author/][/a]
[/b:if]
[/b:if]
----------------------------------------

Can you see from that why it's deleting the name of the other commentors?

Billy March 2, 2011 at 4:45 AM    

Sussed it!!

I just needed to add CSS styling for the relevent class:

.comment-author a { color: red !important; }

Jennifer March 14, 2011 at 3:16 PM    

Hey I just wanted to say thanks so much for the information. It was simply and straight to the point. And most of all IT WORKED.

Thanks Again.

http://www.pcosdiaries.com

Honeybee March 16, 2011 at 7:33 PM    

Like! Like! Like!

Srivathsan March 28, 2011 at 1:33 PM    

:) thnx green lava

Haz Issac March 30, 2011 at 2:58 PM    

excellent job green lava! i try n search many blog for this tricks, but i cant get.. now i give u a credit 4 this..! good job!

Greenlava March 30, 2011 at 7:09 PM    

@Haz Issac
Thanks

sheena April 12, 2011 at 10:37 AM    

Howdy, its me again~ Im totally loving your webpage. ITs THE MOST RELIABLE for me :)

I cant seem to find [p][data:comment.body/][/p] in my HTML at all, and I have already clicked expand widget..Any idea how to do it? Thankksss :D

Greenlava April 15, 2011 at 10:38 PM    

@sheena
Use the search function (by pressing Ctrl+F) to find data:comment.body

Sheena April 19, 2011 at 6:09 PM    

Yes, that's how I searched. It doesn't have data:comment.body at all.

Sudeep Acharya April 27, 2011 at 2:23 AM    

Thank you for such working trick....

Sheena May 28, 2011 at 11:42 AM    

Hi there, I have found the link, It was hidden due to my template settings I guess. Anyway, Could you teach me how to change the VISITORS font? I want to change the font color to this : #00005C, for both the name and the comment body. I also want to make it bold typefont. Could you please send me the css for it? thank you

Greenlava May 30, 2011 at 11:40 AM    

@Sheena
Go to Design > Template Designer > Advanced >Add CSS and add this snippet:

ol.commentlist li .comment-author, ol.commentlist li p {
color: #00005C;
font-weight:bold;
}

MuhabbetTr.Net June 6, 2011 at 8:36 PM    

Thank you For the post its very intresting

Sha-na.Szied July 5, 2011 at 11:39 PM    

reallyyy thx !!!! i made it!!

but if i want bold and italic in the same time.. HOWS? :)

Greenlava July 7, 2011 at 4:44 PM    

@Sha-na.Szied
Replace the code in line 4 with this:
[p style='color: limegreen; font-weight:bold;font-style:italic;']

Tharaka Veen Live September 13, 2011 at 10:14 PM    

Thanks

Janka November 13, 2011 at 11:06 PM    

It works !! Thank you so much :)

Cathy November 21, 2011 at 11:55 PM    

Another great tutorial! I was hoping to change the background color but this is great too.

I've been tweaking my blog all day and yours are always the tutorials I end up using because they are well written and most of all... they work! :)

Thanks :)


Cathy
www.sidetrackemom.net

Anara from able2able February 4, 2012 at 1:13 AM    

Love it! ALways a rush when a hack works the first time. Thank you!

ajay March 25, 2012 at 9:31 PM    

Good Blog, nice

Techno Tweaks April 28, 2012 at 11:14 PM    

:D thnks :D

Arvind Bhardwaj May 30, 2012 at 1:53 PM    

Here is the simple trick to highlight threaded author comments on blogger - http://www.webspeaks.in/2012/05/highlight-threaded-author-comments-on.html

Karin E Jansson June 29, 2012 at 5:22 AM    

Hi! You have helped me several times before, maby you can help me one more time?

I while back I changed my html code so that my comments were bold. It worked great. But after blogger changed so that you now can comment on comments, the functions of author highlight vanished. The code (which I got from you) is still there, but its not working.

I tried to change the colour of my comments as well ( I had black before), but that didn't work either..

Is there a way to fix it? I would like my comments to be black and bold, or (but this might be impossible) the entire comment to have a different coloured background, like light gray or so..

Many thanks!

PS. I will of course, as previous times, make a donation if you can take the time to help. DS

Greenlava July 4, 2012 at 8:18 AM    

@Karin E Jansson
I'm planning to write a tutorial on this subject (highlighting author's comment in Blogger threaded comments), but since you asked I might as well give you the code here:
Here it is:

<script src='http://code.jquery.com/jquery-latest.js'></script>
<!-- author comments highlight Start -->
<div id='bsACHL'>
<script>
$(document).ready(function(){
$('cite.blog-author').parents('.comment-block')
.css({'border':'solid #dddddd 1px','background':'#f1f1f1','padding':'10px'});
$('#bsACHL').parents('.HTML').css('display','none');
});
</script>
</div>
<!-- author comments highlight End -->

Copy the code and paste it in a HTML/Javascript gadget.
You can change the background color by replacing #f1f1f1 with your own.
And I need feedback, please tell me if it works (or not).

Karin E Jansson July 18, 2012 at 4:42 PM    

Yey, it works!! Thank you!!!

mahendran November 25, 2012 at 5:45 AM    

cool thanks..-

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment