How to Change - Author comments style in Blogger?

Author comments are very much important on the blog which makes the visitors to participate in the discussion. If the author comments are customized and highlighted differently from the visitors comments, the author comments would be very prominent and will encourage the visitors to participate in the discussion on the blog post. The discussion on a blog post will always help a blogger to identify what the visitors response for the post and what more they are looking from the author. In this post, let us learn the process of customizing the default/usual author comments style to a totally unique in manner which could make the discussion an interactive and useful for both the author as well as visitors.

The blogger comment block consists of three different sections mentioned below.

• Section1: Comment-author
• Section2: Comment-body
• Section3: Comment-footer

By now we are familiar with the information required for comments section on blogger. Now lets us try out on a sample blog to see how it works.

1. Go to: Blogger –> Template –> Edit HTML
2. Take a backup of the existing template before making any changes.
3. Search for the code ]]></b:skin>
4. Paste the below CSS code just before ]]></b:skin>
.arun-comment-body { background: #FFFFFF; color: #006000; border: 1px solid #009000; margin:0; padding:0 0 0 10px; width:500px; }

5. Make the necessary changes to the code above pasted in blog template HTML code.

To change Comments section background – Change #FFFFFF to any other required colour value
To change Comments section font colour – Change #006000 to any other required colour value
To change Comments section boarder style – Change solid to either dotted or dashed
To change Comments section boarder width/size – Change 1px to any other required width
To change Comments section boarder colour – Change #009000 to any other colour value
To change Comments section width – Change 500px to any other required width value

Similarly we can try out changing the other parameters available in the code and see what happens to the author’s comments section.

6. Now search for the below code from the Template HTML code.
<data:commentPostedByMsg/> </dt> <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>

7. Replace it with the below mentioned code
<data:commentPostedByMsg/> </dt> <b:if cond='data:comment.author == data:post.author'> <dd class='arun-comment-body'> <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>

8. Save the Template and view blog to see the changes happened to the Author’s Comments section.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.