14 How to Highlight Author Comments Wednesday, May 21, 2008 /

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:

1. Copy the code above to your clipboard


2. Highlight the entire section of your comment code in your Blogger template


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