Use A Different Background Color For The Authors Comments On Blogger




| 7 comments

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:

Blogger layout

edit html blogger

Expand widget templates blogger


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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

7 comments:

  1. this does not work for me -no change at all. also the first line of my existing code is different from yours:
    "dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'"
    i have also applied the reply button hack -could this be interfering?

    ReplyDelete
  2. thanks! its works at my blog.. :)

    ReplyDelete
  3. Its nice as u explained but in mine blog such codes are not found.. so How do I do it.. plz check mine once suggest me to change in which part so that i can obtain as you explained here.


    Regards,
    Nirazo

    ReplyDelete
  4. So informative things are provided here,I really happy to read this post,I was just imagine about it and you provided me the correct information.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us