Get Latest Tricks Alert Daily
Follow Readers

Change Author Comments Color Style In Blogger


SHARE:


highlight-commentsHighlighting 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.
]]></b:skin>
     5.   Just above it paste the CSS code below,
.mbt-comment-body {
background: #FFFFFF;
color: #008000;
border: 1px solid #008000;
margin:0;
padding:0 0 0 10px;
width:520px;
}
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 soliddashedor 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
      <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 following code,
      <data:commentPostedByMsg/>
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-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 your template and you are done!
Visit your blogs and see that the author comments now look something like this,




SHARE:



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!

Subscribe To Get Latest Tricks On Email!

 

3 comments:

  1. Thanks for the tip, worked just fine. One comment though: I don't know why, but the footer had a problem and overlapped with the following comment. I solved it by copying the normal comment footer settings and adding the background color.

    SEO Services

    ReplyDelete
  2. This does not work for blogger...

    ReplyDelete
  3. very informative articular, Thanks for sharing this
    http://www.mybloggertools.com/

    ReplyDelete