Tuesday, 23 April 2013

Tagged under: , , ,

How to Change Author Comments Color Style In Blogger Blog

change author comments background style
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:

change author comments background style
 After Expanding Search this tag </b:skin> See the shots below:
change author comments background style
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:

change author comments background style

change author comments background style



change author comments background style

change author comments background style
  •  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


change author comments background style
change author comments background style
change author comments background style
change author comments background style
change author comments background style


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!





11 comments:

  1. Hey Hafeez bro..this post is really awesome and specially the images you used to describe this post in detail for easy understanding. Thanks buddy. :)

    ReplyDelete
  2. @Ankit

    Ya Ankit you are right we should must describe our post with images because with the inventions of blogger new Html Editor interface many newbies are in troubles. So everythings should be clear in advance. Thanks to see you.

    ReplyDelete
  3. hafeez brother this post is really useful for me i appreciate your hard working keep it up brother ii learn many of thing from your day by day tutorials

    ReplyDelete
  4. @Shakeel Asghar

    Thanks Bro for your hard appreciations. You always encourage me thankx for the nice moments here with PBT.

    ReplyDelete
  5. @Sameer

    Thanks sameer for thumbing up to PBT. You are always welcome here. Thankx

    ReplyDelete
  6. Hi Hafeez, I made a test and post a comment and the old comment box appear again after that. Could you please check it for me? Here is my blog: http://realestateinvietnam.blogspot.com
    Thanks a lot :)


    ReplyDelete
  7. Hi Hafeez! Great post to share! But I don't have the "" code in my HTML because I use a different template. I can't figure out what code it is that needs to be replaced :( Any tips?

    gohomemydear@gmail.com

    ReplyDelete
  8. * the DD comment-body code

    ReplyDelete
  9. HI Hafeez, i had a problem I can't see comments in my blog. But it's showing the count of comments.
    Is there any solution for this. Check this Once. http://www.theamazing-worldz.blogspot.in/2013/06/solution-to-adfly-blank-page-problem.html

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. I Don,t Know whats you means Hafeez Khan Comments Should be dofollow and from highly PR websites but in all your posts you did not concentrate on highly PR websites or Dofollow comments even in your this websites comments are nofollow I think so you need plug-in Dofollow from firefox am i right ??

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism