Widgets

Posted by : Blogger Wits Thursday, May 14, 2015

Change Color of Author's Comment
Comments are an important part of a blog, therefore it should be attractive and responsive for your visitors. You should make a difference between Author's comment and visitor's comment. There are many ways to differentiate between author's comment and visitor's comment but you can make it different by changing color of author's comment. So the visitors can easily figure out the comments published by blog's author. Sometime we are unable to differentiate between author's  and visitor's comments, because they looks similar. 

How to Change Color of Author's Comment in Blogger?

Step 0- Always Backup your Template

Step 1- Select your blog and click on "Templates" and "Edit HTML"

Step 2- Click inside the code area and press "CTRL + F" for search box, and search <b:skin>...</b:skin> and expand HTML by clicking on black arrow

Change Color of Author's Comment

Step 3- Just paste this code above </b:skin> tag

  /*-----BW-----*/

.pbt-comment-body {

background: #EDD579;

color: #008000;

border: 4px dashed #3399FF;

margin:0;

padding:0 0 0 10px;

width:520px;

}
To change the background color of author's comment just change #EDD579
To change the text color just change #008000
To change border size just change 1px and for changing border color just change  #3399FF
To change the width just change 520px

Step 4- Now Search for this 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> 

Step 5 - If you not find this code then just take the following steps on your template

Change Color of Author's Comment
Change Color of Author's Comment

Step 6- Just Replace above code with below code

 <data:commentPostedByMsg/>
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='pbt-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>

Step 7- Now Just save the template and you are done

Leave a Reply

Popular Post

Copyright © 2014 Bloggerwits