Updated Add Colors And Hover Effect To Authors Comments On Blogger




| 15 comments

blogger commentsBack In January 2010 i wrote a post showing you how to use a different background color and text color on comments by the blogs author.This is a great way for readers to quickly find comments you make on your blog such as replies or extra information.That code has since become somewhat outdated so i have been working on a new more advanced code.

This week you may have noticed i have being trying out the code on the comments this blog.As with before the authors comments will have a different background color and text color but i have added a few more features.The background color will also have rounded corners and the colors will change when users hover their cursor over the comment.


Video Post - For Extra Help I have A Video Tutorial At The End Of the Post.

Author Comments Screenshot


You can see my comments have a different background and font color.I have set my comments to have a black background with White text.I also have a hover effect so with the cursor over the second comment the color changes to a Grey background with White text.

blogger comments

I have used black and white (Grey And Black On Hover) but you can use any colors you like to suit your template.

This tutorial does include making changes within section of code so make sure to back up your template and take your time.

Add Colored Author Comments To Your Blog


Step 1. In your Blogger dashboard click > Design > Edit Html > Tick The Expand Widget Templates Box :

Design Edit Html Widget Templates

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and Paste the following code directly Above / Before ]]></b:skin>

.comment-body-author {
-moz-border-radius: 15px;
border-radius: 15px;
background: #000000; /* BG color*/
color: #ffffff; /* Font color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

.comment-body-author:hover {
-moz-border-radius: 15px;
border-radius: 15px;
background: #cccccc; /* BG Hover color*/
color: #000000; /* Font Hover color*/
border-top: 1px solid #990000;border-bottom: 1px solid #990000;border-left: 1px solid #990000;border-right: 1px solid #990000;
margin:0;
padding:0 0 0 20px;
}

Note - The colors (Hex) are highlighted in red above and can be changed.To get the Hex code for the colors you want go to this chart - Hex Code Color Chart.

Step 4. Save Your Template, But we are not finished.

In the next step you need to find a section of code in your template and add two extra snippets of code to it.When testing this i found older and custom Blogger templates are different to templates from the Blogger templates designer.For that reason i have two separate methods.The first is for people with Blogger templates that are not from the template designer the second is for templates from the template designer....Got It ....

Users With Custom And Older Blogger Templates Follow These Steps


Step 1. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line (Use The Ctrl F Search Method) and work from there.If you cant find the first line look for the second line, remember Blogger templates can have different code so it might not look exactly the same.

<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>

Step 2. OK you have located the section of code, we now add two snippets of code to it.You can see the two snippets and were i have added them below in red.

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<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>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Step 3. Once your happy you have the code in the right place you can save your template and check it out.

Users With Templates From The Template Designer Follow These Steps


Step 1. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line (Use The Ctrl F Search Method) and work from there.If you cant find the first line look for the second line, remember Blogger templates can have different code so it might not look exactly the same.

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Step 2. OK you have located the section of code, we now add two snippets of code to it.You can see the two snippets and were i have added them below in red.

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<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>

<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:loop>
</dl>
</div>

Step 3. Once your happy you have the code in the right place you can save your template and check it out.



We have lots more tips for your Blog Comments.

Drop Your Comments And Questions Below.


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.

15 comments:

  1. I did everything as you said and saved the template, but it didn't change anything.

    ReplyDelete
  2. @ Lighttraveler - It is a more difficult tutorial.I have edited the steps to make it easier and added a video so check it out and I'm sure you can do it !

    ReplyDelete
  3. Thank you! This was easy & worked perfectly.

    ReplyDelete
  4. o.m.g i do that on my blog so coool :)))

    ReplyDelete
  5. Hey paul i want my blogger comments as like yours please tell me how i change my old comment style like yours..
    Thanks
    Your blog is awesome i got lot of helpful information from here

    ReplyDelete
  6. Really nice and easy thx :)

    ReplyDelete
  7. I use the Template Designer for my blog. I looked for this code & couldn't find it using Control F: ]]>

    Does this mean that this feature would not work on my blog?

    ReplyDelete
  8. I have everything in place except don't know exactly where to place this bit:

    My code looks different than yours, so not sure where to paste it for it to work.

    ReplyDelete
  9. Yes it works for me, but only when i point my mouse to my comment, but when it is not, there would no color at all, what is the problem sir? I use a designer template but the one that can be found is the one on the classic template. Thank you. Prime Aque @ simplifiedblogging

    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