How Highlight Author Comments In Blogger

You might have Seen highlighted author or admin comments in many popular WordPress powered websites. but how to get the same effect in blogger? yeah that can be done! :) Lets get on with the tutorial straightaway.


As usual login into your Blogger Dashboard > Layout > Edit HTML and check the "Expand Widget Templates" option.

Important Step: Now as a precautionary measure please download your template so that you have an emergency backup if in case you create any errors :)

First locate this code in your blogger template.

]]></b:skin>

And copy the following code and paste it above ]]></b:skin> tag

.author-comments {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

Now you have to go to the comment section of your blog. Please note the code may vary for each template so try to find a similar code.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" data:comment.id'>
<a expr:name='"comment-" data:comment.id'/>
<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>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

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

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Now you will have to add the bold text part into the comment code in your blogger template. I repeat, be careful, you wont find the exact codes. But you will have few tags here and there.After this is done paste the bold text in the above code segment.

Now how to style the comment part.
1. background: #ffffff; can be replaced by background: url(http://link_of_your_image.jpg) ;
2. change the border by setting it as higher value if you need a thicker border or make it as 0px if you don't need it. ( border: 2px solid #666666; )
3. If you are smart enough use the img attributes and add a gravatar like the one I'm using here.

Feel free to ask me in case of any doubts.

If you enjoyed this post, make sure you subscribe as an Reader!