Use A Different Background Color For The Authors Comments On Blogger

This is becoming a very popular trend in the blogging community.The hack is simple and the effect is used to make the admin comments stand out and let people easily see which comments are yours.Regular readers will have noticed i have been using the hack for a while and all my comments have a black background with white text while all other comments have a white background with black text.

Once you have made the change all your comments will show in a different color and you can choose the color schemes it does not have to be black and white like i use.A few months back i had been considering using a different comment system like discuss or intense debate but decided to Spice up the default blogger comments instead and there is a lot you can do with the Blogger comments, i will be covering more comment tips in future posts.

In a recent post i showed how to add images and text above the comment section Add Images Above Blogger Comments Click Here to see that post.

This trick is a little harder as we need to make a few changes so make sure your template is backed up.

Here is a preview of how my comments look :

So lets change your comments

Step 1. In your dashboard click ►’Layout’ ►’Edit html’► Tick the ‘Expand widget templates’ box:

Step 2. Find the following piece of code in your blogs html :

]]></b:skin>

Step 3. Place the following code Directly Before or Above ]]></b:skin>

.comment-admin {
clear: both;
margin: 10px 0 14px 0;
padding: 10px;
width: 400px;
background: #000000;
color:#ffffff;
}

Note: The two parts highlighted in red are the Background Color and text Color they are currently the same as mine using a black background and white text :

Background: #000000 (black)
Color: #ffffff (white)

You can change these Click Here for a color code chart to pick new colors.
( ? ) You will see a 3-6 digit code beside the colors use that code.

This next bit can be a bit tricky as you need to replace a large section of code so take your time

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Step 3. Find the following section of code in your template
Tip: Use CTRL and F to look for the first line and then locate the entire section.

<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

Step 4. Replace that entire section of code with the code below :

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-admin'>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>

Once you have it replace click save and check out your new comment section !

Hopefully you will get it first time but as long as you have your template backed up you can repeat until you get it right.

If you have trouble making the change or need more help with any part just leave a comment and i will be glad to help.

Like This, You Will Love :

• How To Automatically Hide Spam Links In Blogger Comments
• How To Number Comments On Blogger With CSS
• Blue Ice – An Elegant New Comment Theme For Blogger Blogs
• 8 Useful Tips To Encourage Your Readers To Comment More
• Spice Up Your Blog Threaded Comment Style For Blogger