Colors And Hover Effect To Author's Comments in Blogger

You have seen several posts about 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.

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. You can see below comments have a different background and font color.There are some Author’s comments having a black background with White text and some comments have hover effect so with the cursor over the second comment the color changes to a Grey background with White text.

Add Colored Author Comments To Your Blog:

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

Step 2. Find the following piece of code ]]></b:skin> in your blogs Html : (Click Ctrl and F for a search bar to help find the code )

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

Step 4. 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 and work from there.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

Step 5. 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>

<p><data:comment.body/></p>

</dd>

<b:else/>

<dd>
<b:if cond='data:comment.isDeleted'>
<span><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

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

Step 6.  If you placed the code in the right place you can save your template and check it out.