
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.
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.
Step 6. If you placed the code in the right place you can save your template and check it out.
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.
0 comments:
Post a Comment
Important - If you are asking a question click the 'Subscribe By Mail' link below the comment form to be notified of replies.
Note:If you add a link to your comment it will not be published.