How To Change The Background Color Of Comments In Blogger


In the comments here on Technology Leisure you will find the background color of comments is white.I got lots of requests for covering this on a tutorial so today i am here with this tutorial which changes the background color of comments in blogger.Ok so in our previous post i'll tell you how to change the background color of Wordpress blog.But today in this post i'll tell you how to add different colors in Blogger blog.Most probably you will find lots of tutorials online which tells you how to change the background color of Author comments in Blogger, but with the help of this tutorial you will able to change the background color of all your comments.

But now you are able to add background color in comments which you want.The background color gives a good look to your comments and your blog become famous like viral.Changing background color is not so difficult in Blogger blog, you can done it by adding simple coding in your blog.These coding's just add color in your comments and doesn't do anything else.

Now lets start the step by step tutorial on how to change the background color of comments

I made this tutorial in steps for making easy for you, and i think that with this tutorial you will be able to change the background color of your comments in blogger blog.

Step1.) First Log-in to your blogger account and go to your Dashboard.

Step2.) When you logged in your dashboard, now go to the Template in your blog.
  • If you are using new interface then after the name of your blog click on second button for more options and then choose template.
  • If you are using older version go to your dashboard > Click on Design > Click on Edit HTML.

Step3.) Now Check the Expand the widget box for viewing all coding in your blog's html.

Step4.) Now search for the code ]]></b:skin> in your template (for searching press CTRL + F for searching bar).

Step5.) Before the above searched code add the following code.
.tek-comment-body {

background: #008000;

color: #FFFFFF;

border: 1px solid #008000;

margin:0;

padding:0 0 0 10px;

width:520px;

}

Before saving the template wait for a minute and change the color's which you want to see as a background of your comment body.
  • Change the highlighted code in red for changing the background color and add your color which you want.
  • For changing the text color change the code highlighted in green color with a specific color you want.
  • You also able to change the border color of your comments by changing the highlighted color in yellow.

Step6.) Now search for the following code, its difficult to search the whole snippet so just search for 1 line and check the whole 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>

Step7.) Now change the above whole code with the code given below in your blog HTML.
<data:commentPostedByMsg/> 
          </dt> 
<b:if cond='data:comment.author == data:post.author'>
<dd class='tek-comment-body'>
<p><data:comment.body/></p>
</dd>


<b:else/> 
          <dd class='tek-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>

Step8.) Now save your template and check the new look of your comments.Its look pretty and attractive and you will now able to engage your readers in your blog.

Stay connected with Technology Leisure as in coming days we are going to make your comments more attractive.

If you like our tutorial then recommend us on Social network sites like Facebook, Twitter, MySpace, Digg, Linkdin and lots more.

No comments:

Post a Comment

Any Question, Feedback, Suggestion and Idea are always welcome.If you are asking a question then don't forget to subscribe the following comments for getting answers directly in your mailbox.