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.
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
- Comment-Author
- Comment-Body
- Comment-Footer
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/>Finally Save your Templates & you done almost:
</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>
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!
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@Ankit
ReplyDeleteYa 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.
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@Shakeel Asghar
ReplyDeleteThanks Bro for your hard appreciations. You always encourage me thankx for the nice moments here with PBT.
@Sameer
ReplyDeleteThanks sameer for thumbing up to PBT. You are always welcome here. Thankx
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
ReplyDeleteThanks a lot :)
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?
ReplyDeletegohomemydear@gmail.com
* the DD comment-body code
ReplyDeleteHI Hafeez, i had a problem I can't see comments in my blog. But it's showing the count of comments.
ReplyDeleteIs there any solution for this. Check this Once. http://www.theamazing-worldz.blogspot.in/2013/06/solution-to-adfly-blank-page-problem.html
This comment has been removed by a blog administrator.
ReplyDeleteI 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