Highlighting author comments using a different background color, border or different style of text helps readers understand when you have personally posted a response.
So far, "How to Highlight Author Comments" has been the most requested article in my Skribit widget, so in this post I'll explain how you can change comments which you have posted yourself to distinguish these from other comments on your posts.
First things first!
The main obstacle I've faced in writing up this article so far is that different Blogger templates code the comments section differently.
While the easiest method for me to write would have been to say "Find this code and replace it with this", such a method would only be usable by bloggers whose template matches the code.
Instead, my explanation may be a little more complicated than usual, though I hope this explanation will ensure anyone using a Blogger template will understand how to implement the highlighted author comments hack!
Backup your Blogger Template!
Before even attempting to customize your Blogger template, the first thing you should do is back up your template. This ensures you can easily restore your original template if something goes wrong. Also, as most of us cannot see comments unless we are viewing a post page, it would be impossible to see if code changes have adversely affected the comments section.
To make a backup of your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link. This will save your existing template as an XML file which you could use to restore your blog, just in case :)
Finding the Comments Block in your Blogger Template
The first thing we need to do in order to implement this hack is to locate the "comments block" within your Blogger template.
To find the comments section, you will need to tick the "expand widget templates" box as this code is contained within your main "Blog Posts" widget.
As I've already pointed out, the section of code used to display comments varies in different templates, so in order to find this section, you may need to search for some specific tags rather than complete sections of code.
To give you an idea of what you are searching for, here is the complete comments-block code from the Minima template:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
If you are using Minima (or a similar template) you should be able to locate this section of code easily. However, some templates use <ul> and <li> instead of <dl> and <dd> tags, in which case the code you are looking for may look more like the section on this page instead, or could even be wrapped in simple <div> tags.
If you are having trouble locating the comments section in your blog's HTML code, do a CTRL+F (or CMD+F for Mac users) search within your template code for the following template tags:
<b:loop values='data:post.comments' var='comment'><data:comment.author/><data:comment.body/>
The comments section of your blog's HTML code should contain all three of these template tags. Simply locate these tags and the surrounding code in your template, then work out where this section begins and ends using your discretion.
Generally speaking, this section will usually begin with <dl> or <ul> or <div> and end with a matching closing tag.
Changing the comments code to add author highlighting
Once you have located your comments section in your blog's HTML code, you will need to highlight this entire section of code and replace it with the following section of code instead:
<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<li class='author-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>
<b:else/>
<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>
</b:if>
</b:loop>
</ul>
The simplest way to change your comment code is to follow these steps:
- Copy the code above to your clipboard
- Highlight the entire section of your comment code in your Blogger template
- Paste the code from your clipboard in place of the existing code by keying CTRL+V (or CMD+V).
One quick method to check if you have made code errors is to preview your template. If you have accidentally omitted some code, you will receive an error message. In this case, you should press the "clear edits" button and begin again.
If you don't get an error message, you can then proceed to save your template.
Adding style for author comments
At this stage, your own comments will still appear in the same style as other comments. To highlight author comments, we need to add some style code to your blog template.
This step is much easier than locating and changing the comment section. Simply locate the closing </b:skin> tag in your Blogger template, and immedietly before this, paste the following section of code:
.author-comments {
background: #cccccc;
border: 1px solid #333333;
padding: 5px;
}If you prefer, you can change the hex colors (#cccccc and #333333) to match the color scheme of your own template (discover the color codes for your preferred schemes using the web color calculator).
Then save your template.
Now when you make a comment on your blog while signed in to your Blogger account, your comments will have a different border and background color to comments posted by your readers.
Here is the effect of this author comment highlighting hack as seen in one of my test blogs:
I hope this tutorial has helped you discover how to highlight author comments in your own Blogger blogs.
You may also be interested to read how I added MyBlogLog comment avatars, which is the method I use here to distinguish between my own and readers comments.
Please let me know your opinions of this post by leaving your comments below.
Save as PDF
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
Post a Comment 55 Comments:
I saw a friend do this other day on her blog and I thought it was pretty cool. I just hadn't had time to research it. Thanks for putting this together. I'll have to try it out soon and see if I can get it to work!
Wow. That was complicated. My custom template has that commentlist code twice!(huh?)
& it starts with "ol"
I didn't dare to change the code & so I just modified the CSS. Results are OK.
:P
When you put in the code, does that translate into author comments you've already posted or future comments?
I'm curious because I put in the code and it didn't work on existing comments.
Rebecca
For Nicole:
I'm glad this post will be useful for you. It's really not difficult to implement (I had to explain as many possibilities as I could to ensure the method suits all templates), so please let me know how you get on with this :)
For Carrotmadman6:
Sorry this method seems more complex than other articles! Other readers have emailed about this before to say other explanations haven't covered the specific code used in their templates, so I tried to be as comprehensive as possible.
Glad to see you've been able to use this for your own comment styles though :)
For Rebecca:
This technique should highlight all existing comments you have made while logged in to your Blogger account. But I've noticed on my own blogs that if I comment using my name and URL (whether logged in or not) Blogger doesn't always recognize my comments as generated by me, so the highlighting doesn;t always work. This is one of the reasons why I like the MyBlogLog comment avatars hack, so readers know I've responded when they see my profile image ;)
Try commenting using your Blogger profile for the login. If this still doesn't work, it would seem there is some error with your code, so let me know your URL and I'll take a look for you.
Best wishes and thank you all for your comments,
Amanda
hi amanda! i tried this one but it doesn't show any effect on my comments. pls help! my url is: http://agreatpleasure.blogspot.com
Thanks!
thanks Amanda..
it's working fine at my blog :)
thanks Amanda great job.i need a solution about italic link font.How can i change it to normal.i tell that hack to Turkish bloggers, someone tell about that problem.But i cant solve it.
İm waiting, thanks again.
Thanks Amanda! This works great at my blog. However, I tried to find information on making the other comment styles alternate with the highlighted author comments, to no avail.
a) it just doesn't work (i.e. I can't find the stuff they're suggesting I add stuff to, even in expanded html form) and
b) I'm not a techy nerd, so your simple instructions help a lot.
I was wondering if you could make a post for this (please) or maybe reply or give me a link for a website or post that explains this kind of thing for Blogger. Help is greatly appreciated.
heyy amanda..nice post..thanks a lot..
i have 1 question for u.
is it possible that like a wordpress blog, in blogger blog too we can have
commenting dialogue box in the 'post' page itself with options to add email,webpage etc..pls have a post on this hack of its possible
I tried my best to follow your instructions, but it seems not to be working. Here's my URL: http://2kop.blogspot.com/. Thanks for checking it out.
Hi again...sorry, my wording wasn't very clear above. I just want to know how to make comments alternate when you also have author comments highlighted in the way posted above. Thanks.
Amanda - you are DA BOMB.
I just LOVE all of your tips - and you make it so easy for all of us newbies to follow along - thank you!!
I do have a question on this one for you, and was wondering if you could take a look at it for me?
I've installed the code as stated above, but it doesn't seem to be highlighting my comments... I post my comments with my blogger profile, so I'm wondering if it's something else...
Could you take a look and let me know your thoughts?
My URL is http://www.danceofmotherhood.com
Purdy please?
P.S. LOL - you'll probably notice that I've implemented a couple more of your hacks/widgets. ;)
I just came across your post looking for this sort of hack, so thanks a lot. Following your directions was a breeze. Only problem is I don't see the highlighted comments. I tried a test comment on one of my posts; no difference. Thoughts?
Just found out your blog (Why didnt I see it before!)
Anyway couple of your hacks worked easily, but seems like I'm not the only one for whom this one isn't working! :(
Any idea why?
Amanda,
Thanks for this great tutorial. I just have one question. All my comments are now in bold when you view within the blog page, how can I unbold them?
Thanks,
Jay
Yeah, it's not working for me either.
I posted the code exactly like in the directions, but my comments section looks the same - no highlighting.
Any help would be greatly appreciated. Thanks!
Not working for me either.. very strange. Very strange that the comments begin with "OL." Not the tradition type of coding. Any ideas as to why this code of yours isn't working?! Is there maybe an error where the widgets are conflicting with the layout? I've had this problem before.. where my widgets wouldn't compliment my layout. Very very strange.. Blogger continues everyday to surprise me.. Thanks for all the ideas and codes.. great work.. I'm just a lil' surprised at Blogger again.........
I have the Minima background and I tweeked the colors a little but yeah the code's not working for me either. I don't know if I am just especially slow, or what but if anyone could help me out I would be so grateful, thanks.
My blog:
http://thegbdmylifeandtimes.blogspot.com/
testing if comment author's name is equal to post author's name, what the color it will be :)
Hi Amanda, I love all your tips and this works perfectly after just one try! :) Thanks so much!
Just a question : How to remove the date under the comments ?
Hey Amanda...I was able to insert the changes with no errors but nothing happened everything still looks exactly the same.
Hi Amanda,
I tried to follow your method but it didn't work for me. Instead I was able to figure out how to do it easily with some CSS hack.
I have blogged about it on my blog. Here is the link below, if you wanna check:
http://www.knowliz.com/2008/08/how-to-highlight-blog-author-comments.html
Hi Amanda,
This tutorial is brilliant
Was able to install it in my layout with no worries. I love my comment form now!
I'm just wondering if you know the code on how to make the photos of the commenters appear. It would really be very nice! thanks again.. kudos to you!
Hi Amanda,
I'd like to implement this on my blogger blog, along with the inline comments, but for some reason when I set it to inline comments the comments link wouldn't work.
Any ideas how I can get this and that to work together?
Thanks again for your tips and help!
@Twinks: The only method of displaying avatars at the moment is to utilize the MyBlogLog comment avatars hack which you can read about here: http://www.bloggerbuster.com/2007/11/how-to-add-comment-avatars-to-see-your.html
Hope this helps!
@Patty: I think you are referring to links which would usually jump to the comments section of the post page? If so, you only need to make a small change to your template code. Find any instances of links (not in the b:skin section) which include #comments and change this to say #comment-form instead. This should make the link direct to the correct part of the page for you :)
Thanks for the great tutorial! I also added a little transparency to my background which allows my background image to show through and doesn't break up the page so much while still differentiating the author's comments. Here's the code:
.author-comments {
background: #444444;
color: #ffffff;
border: 2px solid #666666;
padding: 5px;
filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
}
www.schemanski.com
I really like this feature. I installed the code on my blog, but then one fine day the highlighted box disappeared.I've tried to put the code back in place without any success. Any help Amanda?
Thanks and this is pretty cool and working neatly but:
All the styling for the comments-block is gone and one can't modify them anymore after applying your code. (Or can one, then how please???)
The comment author is being displayed in italics suddenly. (Can you let us know a method where this is not happening?
Most important: How can you have highlighted author comments and still be able to apply style?? (font-size, font-weight, text-transform and so on?) Did not manage to anymore in the comments-block can you tell me how please???)
Finally: How can you display the comment date next to the comment author and not under the comment text?
Thanks & Ciao
amanda, you rocks!
i love your blog!
I found a method different from yours to highlight author comments and still be able to style them individually and without making the author appear in italic, you can see it on my blog, it is done with jquery and some little css. i will write about it later.
(nevertheless i am still looking for a method to make the comment date appear next to the comment author and not under the comment)
Kiss & Ciao
ps: hope your are having a great vacation ;)
I've done this about 4 x's now and still get an error. can you help?
Just installed it and it works great. Thank You!!
hi Amanda, this is great post..but i was wondering why it remains the same in my author comment...nothings happen i follow all the steps but no change at all..can you help me out this one..
oh geez its alright now amanda i got :)
thanks again...i messed up putting this code
".author-comments {
background: #cccccc;
border: 1px solid #333333;
padding: 5px;
}"
i place it after the end tag of b:skin
....thanks and cheers!
thanks, that works nicely! Is there a way to do a b: if for a specific OpenID comment author? That would be nice for Custom Domain bloggers.
This didn't work for me either.
I didn't have any errors in my template, but the comments look exactly the same.
Amanda,
I have successfully put all the code in- thanks. I am wondering how to change the text color in just my comments- is this possible?
Tessa
Hi there Amanda - I think this feature is built into one of the layouts I use, but I am very frustrated with getting to work with a Team Blog on multi-author posts (Not Comments).
Google has a very basic tutorial, but nothing I do works. Would you happen to know if anyone other than Google discusses using this feature on Regular Posts to differentiate between the authors?
mackenzy:
There isn't anything in the layout code that can declare if the commenter or author is a team member. You would have to this for each member:
b:if cond='data:comment.author == "TEAM MEMBER 1"'
b:if cond='data:comment.author == "TEAM MEMBER 2"'
b:if cond='data:comment.author == "TEAM MEMBER 3"'
You get the idea. I chose to only highlight the comments of whomever wrote the post with their avatar. If I wanted I could have highlighted all my team members using the code above but decided against it.
Amanda,
Thanks so much for sharing this! I am html illiterate, but your instructions were easy to follow and implement!
Hi Amanda, I've used the function of embedding comments in blogger in draft and am unable to get my comments highlighted... I did not get any error while saving the tweaked template. How can I rectify it? Please help! Thank you.
This code worked for me..and i have modified it nicely ... see the modification here Comments
Hi, anything is ok, but permalinks not work more... Is there something to change?
Thank.
Finally--someone who is explaining this properly... The "Expand Widget Templates" was critical. I didn't even see that button until this button explained it.
Once I did that, the rest was easy--my problem was that without expanding the template, this edit was NOT possible..
its not working for me
Hello Amanda!
Used this tutorial until now with great results.
BUT, since 3 days ago, I introduced my grilfriend as second blogger author. The problem is simple: only the first of us to comment on a new article inside the blog gets the highlighted text. Whenever one of us posts a comment after the other, he/she doesn't get the highlighted text.
Well, the solution is not that simple, at least not for me.
Can you help me on this?
Lao.
http://laomayer.blogspot.com
I found this easy to follow, but like a lot of people I didn't get errors, but it didn't work either. Help!
http://cookienotes.blogspot.com
Thanks! Worked fine.
@Lao, you might be doing something wrong.
I have multiple authors highlighted just fine. See here:
http://www.mystady.com/2009/01/party-people-new-years-eve-xxx.htmlWe both have our own avatars.
And here's what it looks like when a non-author posts:
http://www.mystady.com/2009/03/future-events-widget.htmlI haven't published my code so let me know if you're interested.
Wow, thanks! I'll put it on my site tomorrow and see how it works out for me. Your version is better than others I've come across. Keep up the good work! I'm also a bit curious as to why you didn't have this implemented on this site O_o. Anyhow, thanks! :)
Using this code, is it possible to put a border around my guest comments as well? I'm code stupid.
Thank you very much! You are the best blogger in the world!
Useful Article..thank you and keep share