Auto Highlight Author Comments In Blogger Blogspot Posts

How to highlight author comments in blogger blogspot? Make different looks beetween comments given by an author and the visitors can be more interesting than the same looks of each.

We can know the difference of which one the authors comments and which one the visitors comments.

In this blogger guide will tell you how to highlight author comments in the comments section of blogger posts automatically. For the demo, you can see my comments on each my blog posts that already have comments.

I have tested this Blogger hack on this blog and according to the source of this blogger hack, this also works on both old generation of Blogger templates (Minima and Sand Dollar) and the latest generation of default Blogger templates, e.g. Simple. It will also work on customised templates as the comments code is likely to be very similar.

How to Add CSS Styling to Author Comments in a Blogger Post?

The following instructions will highlight author comments in the comments section of a Blogger post. The code creates a shaded box around the comments made by the blog author.

These changes will not affect the CSS the styling of any of the other comments made.

Instructions to Add CSS Highlighting to Author Comments in Blogger

1. Login to Blogger
2. From the Dashboard go to Design > Edit HTML
3. Back up your template by downloading it to your computer
4. Check the Expand Widget Templates checkbox on the top righthand side
5. Use CTRL + F by entering the following into the search box
   <dd class=comment-body>
6. Immediately above this line paste the following code:
   
   
   <b:if cond=data:comment.author == data:post.author>
   <dd class=comment-body-author>
   
   <p><data:comment.body/></p>
   </dd>
   <b:else/>
7. Now look for the following code
   
   
   <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>
   
   then paste this code:
   
   </b:if> immediately after it.
8. Your code should now look like this one:
   
   <div expr:id=data:widget.instanceId + &quot;_comments-block-wrapper&quot;>
   <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>
   <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 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>
   </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>
   </div>
9. Now using CTRL + F again find this code ]]></b:skin>
10. Copy the following code:
    
    .comment-body-author {background: #f5deb3; border: 2px solid #de7008; padding: 5px;}
    
    Then paste the code before this ]]></b:skin>
11. Save your template

Now click on View Blog and go to a post that you have commented on to see the CSS styling has highlighted your comments.

4BW9TDWEU3EC

SUMBER : http://www.zaenudin.com/2010/12/auto-highlight-author-comments-in.html

[Continue reading...]