How to highlight author's comments in Blogger?

MP
Whenever someone writes some comment on your blog, you will definitely like to reply. What if your comments look just like your visitor's? Well! that bothered me and I investigated little bit and came with the following solution. Hope it will benefit you.
Here's the tutorial:

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template (so that if anything goes wrong, you can roll back to your existing template)
  3. Check "Expand widget templates" Box
  4. Search for this (ctrl +f)
]]></b:skin>
     5.   Right above this line, paste the following piece of code:
.mbt-comment-body {
background: #FFFFFF;
color: #008000;
border: 1px solid #008000;
margin:0;
padding:0 0 0 10px;
width:480px;
}
Please note that you can customize these settings as follows:
  • To Change the background color of author's comments change #FFFFFF (note this is hex code for colors, you can google for hex codes and choose the one you like)
  • To change font color change #008000
  • To change border size change 1px. Similarly to change border style change to solid, dashed or dotted. To change the color of the border change #008000. If you don't want a border, simply delete this line.
  • To change the width of the comment body change 480px
   6.   The last step is to tell blogger that you have updated some setting. Search for the following piece of 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 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 there you go
Visit your blogs and see that the author comments now look something like this,

Cheers!

0 comments:

Post a Comment

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | JCPenney Coupons