Decorating Blogger Comment Body And Highlight Author Comments

Naturally, users prefer to know with immediately comment from the author. Basic traits of blogger, do not provide such services. However, we can anticipate it. For that purpose, we make this post.

If you see Putri Arisnawati (author of threelas) has different style with Bayu (user)

Need we tell you that, this topic is a continuation of previous topic and still is the application of CSS. Therefore, we strongly recommend to users, to study the two sources of the link. In addition, to add to the beauty of our blog, we also added features nuanced comments 3d content. Caution: we use a standard template from blogger.

The first step is, click Design tab -> Edit HTML, and don't forget, checklist Expand Widget Templates. Then find for code <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>. Before the code, add the following code,

<!--for owner--> <b:if cond='data:comment.author == data:post.author'> <dd class='owner-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:else/> <!--for owner-->  

After that, look for the code </dd> the first after <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>. Then add the following code

<!--for owner--> </b:if> <!--for owner-->  

The purpose of the code is to examine who is giving commentary. The next step is to put the following css code

<!--for owner--> .comment-body{ background-color:#B28F00; padding:5px; border:5px inset #FFCC00; -webkit-border-radius:6px; -moz-border-radius:6px; -o-border-radius:6px; border-radius:6px; font-family:Arial, Helvetica, sans-serif; } .comment-body:hover{ background-color:#FEE680; padding:6px; border:6px inset #FEF2BF; -webkit-border-radius:7px; -moz-border-radius:7px; -o-border-radius:7px; border-radius:7px; font-family:Arial, Helvetica, sans-serif; } .owner-comment-body{ background-color:#C8C4C4; padding:5px; border:5px inset #E4E0E0; -webkit-border-radius:6px; -moz-border-radius:6px; -o-border-radius:6px; border-radius:6px; } .owner-comment-body:hover{ background-color:#E0DFDF; padding:6px; border:6px inset #EAE9E9; -webkit-border-radius:7px; -moz-border-radius:7px; -o-border-radius:7px; border-radius:7px; } <!--for owner-->  

find this code ]]></ b: skin> and place the above code before ]]></ b: skin>. Then save. Done, you have made a major change in the body of comments. This code can operate on opera, chrome, internet explorer, firefox.