How to Highlight Author Comments in Blogger

Today we will learn to highlight author or admin comments in Blogger so that your comment as administrator stands out from comments posted by others.

Blogger has advanced and many new codes are added. So to highlight the author or the admin comment in Blogger you have to just apply some simple trick to activate it. But however, this tutorial is not meant for those who have enabled threaded comments.

Here’s an advance method to do it. You will find that not the comment body but the whole section of your comment as admin or other comments as author will change. So first just follow the steps:

Step 1: Go to Blogger’s Template tab and backup your template in case if anything goes wrong.

Step 2: Click “Edit HTML” and check “Expand widget template”.

Step 3: Press “Ctrl+F” to open the search bar within your browser and find:

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

The snippets can be different on different blogs depending on their customization and the maker who made it. So the main snippet to find for is <b:loop values='data:post.comments' var='comment'> and replace everything within it and </b:loop> (marked in red, above) with:

          <b:loop values='data:post.comments' var='comment'>
            <div expr:class='&quot;author-comment &quot; + data:comment.authorClass'>
            <dt class='comment-author' 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>
          </div>
          </b:loop>

Step 4: Find ]]></b:skin> and before it add:

.comment-footer{
 margin-bottom:0 !important;
}
.author-comment{
 background-color:#F0FFF0;
 padding:5px;
 margin-bottom:1.5em;
 border:1px solid #ccc;
 border-radius:10px;
}
.author-comment.blog-author {
 background: #FFEBCD url(https://lh3.googleusercontent.com/_-BRP4LFLyWc/TZX3b7r2AyI/AAAAAAAAATY/8Am8ri02OjE/s800/admin.png) no-repeat right top;
}

Step 5: Save your template. You will now find that the full section of the author or admin comments in Blogger is colored and standout from rest of the comments.

Now it’s time for some customization. Change the color hex values, for example: #F0FFF0 or #FFEBCD or #CCC, with the color you want to highlight the comments and you can also change the background image for it, marked in green, with another image to resemblance admin.