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

or

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