Write at HWS !!!

Guest Posting

Friday, October 7, 2011

Change Author Comments Color Style In Blogger

Previous Post was about Customizing Blogger Comment Form in which we have learned how to make your blogger comment box attractive and now we move to the next step its about authors comments. Highlighting and customizing author comments differently from visitor comments is a very important step that you must take as soon as possible because this will make author comments more prominent to the visitors and will therefore encourage visitors to take part in the discussion and better communicate with the author. The blogger comment block consists of three important sections which are,
  1. Comment-author
  2. Comment-body
  3. Comment-footer
Our tutorial today is on how to style the Comment-Body section of Author. So lets get to work!

Highlight and Customize Comments in Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check "Expand widget templates" Box
  4. Search for this.

     5.   Just above it paste the CSS code below,

.hws-comment-body {
background: #FFFFFF;
color: #008000;
border: 1px solid #008000;
padding:0 0 0 10px;

Make these changes:
  • To Change the background color of author comments change #FFFFFF
  • To change font color change #008000
  • To change border size change 1px, to change border style change to solid, dashed or dotted  and to change the color of the border change #008000
  • To change the width of the comment body change 520px
Tip: Use our color generator for making these changes

   6.    Next search carefully for this code in your template,
Tip: Press Crtl +F and search for one line at a time


          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>

     7.     Replace it with the following code,

<!-- www.hackwithstyle.com author comment script starts here -->
<b:if cond='data:comment.author == data:post.author'>
<dd class='hws-comment-body'>

          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>

      8.    Save your template and you are done!
Visit your blogs and see that the author comments now looks different from the visitor comments,

Let me know if you faced any problem. Would be a pleasure helping you. In my next post I will share several ways of customizing author comments. Have Fun! :)

Respected Readers:
As a 21 year old student, the only income I rely on is my pocket money. Bearing the running costs of HWS Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

RSS Digg Delicious Twitter Facebook Stumble YouTube Technorati Google


Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Please do not spam Spam comments will be deleted immediately upon my review.

XEO Hacker

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More


Recent Posts

Join Me On Facebook

200+ Followers


meet women in Ukraine contatore visite website counter

Recent Comments

Follow Me On Twitter

1112+ Followers