Colorize Author's Comment in Blogger

If you write a post that many of the questions are asked and you want to answer there question. It is helpful for any good blogger. in this tutorial you can learn how to Colorize Author Comment or Reply by the Admin of that particular Query Asked by User.

1. In your Blogger dashboard click > Design > Edit Html > Tick The Expand Widget Templates Box:
2. Find the following piece of code ]]> in your blogs Html : (Click Ctrl and F for a search bar to help find the code )
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;
}

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>

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

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

6. Save Your Work and Try Your Colorize Comment Box.

Related Posts:

Promote Your Blog

Add This