Blogger: Highlight Author Comments

I have always found it a little frustrating my own comments seem to blend in with all the rest. A new visitor can figure out for themselves that the James posting is the same James commenting, but wouldn't it be nice if my comments stood out from the crowd a bit? As this blog has become gradually more active, I thought it was time to at the very least find a way to highlight my own comments so new readers can easily find them. This post details a simple approach I developed.

Differentiating Authors Comments
There are many ways to differentiate one poster from another. I've long used comment Avatars when available, while this associates a comment to an image it doesn't quite communicate which ones should stand out. This tutorial provides a basic starting point, from which you may customize to your hearts content. For now I've chosen to simply set my own comments, the only author on JSBlogStop, to a unique background color. Visitors should easily recognize this highlighting and I recommend it as a minimum, although special icons or text could certainly be included as well.

Modifying Your Template
Begin by opening your blog in Design->Edit HTML then check the Expand Widget Templates box. Now, hit Ctrl+F and search for <b:loop values='data:post.comments'. Next, paste the following one line below the found code fragment: <div expr:class='&quot;comment &quot; + data:comment.authorClass'>. This div tag needs to be closed now, so scroll down several lines until you find </b:loop>. One line above close the div by pasting </div>. This code places a container around each comment and those by a blog author get the class .blog-author. Using this CSS selector you may customize the look of author comments.

Highlight Author Comments with CSS
Now, let's style Author comments by again hitting Ctrl+F to search for #comments .comment-author to keep the styles in a familiar and logical place. One line above place the below style:

#comments div.blog-author {  background-color: #E2E2E2;  margin-left: -45px;  padding: 2px 5px 0px 45px;}

The first line in the style sets a custom background color for Author comments only, adjust the hex code to find the highlight that works for your template. Depending on your template, you may also wish to customize the text color. Line two should not be changed typically, while the final number on line three should remain untouched as well. However, if your templates comments are heavily customized you may find need to alter these values as they compensate for standard margins used by Blogger's built in CSS.

Conclusion
Highlighting Author comments can improve visitor experience while browsing your blog. Often times important information can be found in your comment responses. The easier it is for readers to find those updates the better. This tutorial shows but one simple method to differentiate your own comments from those of readers. Play around with the styling and see what works for you. Thanks for reading and good luck with your blogging.

Support JSBlogStop:

Donate with Dwolla