How to Change Author Comments Color Style In Blogger Blog

Being a blogger user nowadays every one want to keep neat & clean blog/website designing interface. Our Today tutorial will be How to change author comments background color text style in blogger blog. So we were talking about the designing. Blogger platform gives us the opportunity to customize each & every parts of a templates by using any programming languages thats why blogger is first class then wordpress. We can full customize blogger templates by inserting Css, java-script, jquery and php inside the templates. So every blogger user have full rights to customize each sections inside blogger templates. So today we are going to learn how to customize author comments text highlighting different from visitors comments.

Why to Change The Author Comments Text Color Styles In Blogger ?

There are numerous benefits if using unique comments box for Blog Author. let clear it  Sometime you might be get hardy to find your answer from Pro Blogger blog if you left a comments on theirs blogs for any query and when after sometime you goes back landed there you will face a difficulty to find your answer  because they are all the same style for visitors & for Authors, many Pro Bloggers are still using default author comments style.

                                      Rounded style popular post widget

I would strongly recommended you if you are using the same then stop it and doing somethings unique. By using the unique and differ comments texts backgrounds color for Author visitors will take interest in discussions and having dozens of comments we have.

Blogger Templates Mostly Consists of Three Comments Block of Sections

1. Comment-Author
2. Comment-Body
3. Comment-Footer
   

But be attentive our today article will all about on how to style comment-body section of blog author:

How to Highlight and customize authors comments ?

Follow our Below simple steps to do the following changes:

• Step 1:
• Go to Blogger Dashboard:
• Go to templates Html Editor:
• Now search for <b:skin>...</b:skin> See the Shots below:

 After Expanding Search this tag </b:skin> See the shots below:

Paste The below css code above the </b:skin>  tag:

  /*-----ProBloggerTricks-----*/

.pbt-comment-body {

background: #EDD579;

color: #008000;

border: 4px dashed #3399FF;

margin:0;

padding:0 0 0 10px;

width:520px;

}

Following Customizations are Possibles

• To customize and change the background of author comments just only change #EDD579
• To customize and change the text color just only change #008000
• To customize & want to chane border size change 1px  & if you want to change border style change to solid  dashed or dotted  and also  to change the color of the border then change #3399FF
• To customize the width of a comment body just only change 520px

Now Change the following Tags inside your Templates

• Step 2:
•  Go to Template Editor Html:
• Find the below codes:

<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> 

If you could not find this code easily then see the below shots for helping:

•  And Replace It with the below given 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>

Finally Save your Templates & you done almost:

Take a look some of the examples of this widget

You can give different style to yours author backgrounds and Text by playing with the Css codes.

/*-----ProBloggerTricks-----*/

.pbt-comment-body {

background: #EDD579;

color: #008000;

border: 4px dashed #3399FF;

margin:0;

Alert to Blogger: We can change different styles of authors comments area by doing some changing in the above coddings. you can also remove the dashed tag and using wihout it if you dont want to have a dashing borders. Now you have your own choice. Make it for your self which one you like you can give thousands of styles by using this simple css codes. Thanks & happy blogging!