Highlight Blogger Author Comments

It has been awhile. This time, I'm going to show you a quick and easy way to make your comments (author comments) look different. In a thread full of comments, one might feel the need to isolate the author's comments from readers' comments, probably by highlighting it or making it look different.

UPDATE: THIS TWEAK WILL NOT WORK WITH THE NEW BLOGGER REPLY COMMENT SYSTEM. CLICK ON 'REVERT WIDGET TEMPLATES TO DEFAULT' TO UNDO THIS TWEAK. I'VE PUBLISHED A NEW WAY OF HIGHLIGHTING AUTHOR COMMENTS FOR THE NEW THREADED SYSTEM, CHECK IT OUT.

This tweak works with both Layout (Minima, Harbor, Denim, Rounders, etc) and Designer (Simple, Picture Window, Awesome Inc, etc) templates. Basically, it'll work with all Blogger 'built-in' templates, probably third party templates as well. Consider this my Christmas gift.

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

Find and delete the following lines:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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>

The code before being deleted (starting portion):

The code before being deleted (ending portion):

Step 2:

Place this modified line in place of the deleted lines.

<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
&lt;div id=&quot;authorcomment&quot;&gt;
<b:else/>
&lt;div id=&quot;readercomment&quot;&gt;
</b:if>
      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>  
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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>
        </dl>
&lt;/div&gt;
</b:loop>

The modified code in place (starting portion):

The modified code in place (ending portion):

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#authorcomment{
background: yellow url("http://www.blogblog.com/1kt/transparent/white80.png");
border: 10px double orange;
padding: 4px;
color: black;
}

You should be able to see your highlighted comments already. If you want to customize this style further, refer to the following step.

Customization:

There are lots of ways to customize the look of your highlighted author comments. I'll list some of the common ones here. If you have something specific in mind, you can leave a comment and I'll try to reply you with a solution.

This is the code that you've added to your template in Step 3:

#authorcomment{
background: yellow url("http://www.blogblog.com/1kt/transparent/white80.png");
border: 10px double orange;
padding: 4px;
color: black;
}

Background	You can either use a plain color or an image as your background. I've used a combination of both (white transparent image with yellow plain color). If you want to use a background image only, declare your background as such (replace IMAGEURLHERE with the URL of your image): background: url(IMAGEURLHERE); For plain colors, use this: background: white; If you want more choices of plain colors, use HEX code instead: background: #121212; You can get the hex code for a given color from this useful site.
Border	The syntax for CSS border is: border: 10px double orange; You can change the thickness of your border by adjusting the value 10. If you want no border at all, you can set it to 0. You can change the color to a different plain color. You can also use hex code for a specific color. You can change the style of your border. I have used a double border. Other options are: solid, dotted, dashed, groove, ridge, inset, outset
Padding	I've included a padding in my code because I think without a padding, the author's profile image is too close to the border. You can set the padding's value to 0 to see what I mean.
Comment Text Color	For plain colors, use this: color: white; If you want more choices of plain colors, use HEX code instead: color: #121212;
Author's Name Color	You can change the color of the author's name by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog: #authorcomment dt a{ color: red; }
Comment Action Message	I don't know what else to call it. I'm referring to the word 'said' in my comments. You can change its color by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog: #authorcomment dt{ color: red; }
Comment Timestamp	You can change its color by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog: #authorcomment dd a{ color: red; }
Bold Author's Name	I did not include this in the example above (for simplicity), but I've used it in my template. You can make your Author's name bold by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog: #authorcomment dt, #authorcomment dt a{ font-weight: 900; }
Style Reader's Comments	If you're wondering how you can defeat the purpose of this entire tutorial by giving your readers' comments a unique style as well, I'm gonna show you how. Just change the ID that is being addressed. The ID for readers' comments is 'readercomment'. Here's a quick example on how you can make use of this: #readercomment{ background: white; border: 2px solid yellow; padding: 4px; color: black; }

It took me really long to write this one, not to mention the time spent to figure out how to do it in the first place. I hope it will be helpful for all of you. Merry Christmas and Happy New Year, to all of you, my readers.