Add Author Comment Differenciate Code

"Add Code to Differentiate Author comments From others"

Here is simple code which you have to install in your template, which differentiate author comments from Visitors Comment in your blog comment section. You can change color what you want of background. Font Style and color. This modification is in two parts , that is CSS , Stylesheet. We first modify CSS part.

Follow Steps :

1. Login your blogger account.
2. Go to your template by click first, Layout then Edit HTML.
3. Backup your existing template to revert back in any fault.
4. Find comment section in template , it is always at the upper part
   of templates, for quick search You can find by pressing ctrl+f and
   insert line in search box popup, what you have to search is  
   .comment-body {  or  .comment-author { , if you find any one
    between two these then good other wise search manually in CSS
    part related to comment
5. Now copy paste code given in "red color" just like given in colored
     box below.

.comment-body {
  margin:0 0 1.25em;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:0;
  padding-$startSide:20px;
  border:1px dotted #254117;
  background:#ffd9e4;
    }
.comment-body p {
  margin:0 0 .5em;
  }


.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
color:#oooooo;
font-style: bold;
background:#ffffcc;
}


.comment-footer {
  margin:0 0 .5em;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.75em;
  padding-$startSide:20px;
  }
This example is for rounder template, You can insert code in any

template but just in comment part of CSS section like in box above.

Now we came to second part of template which have to modify.

6. Now find this code line in template <dl id='comments-block'>
7. If you have not find this then find comments-block only and  see
    other related parts of that code section like in colored box below.

8. Now copy and paste code in red color just like given in  box below.
    

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' 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>
<data:commentPostedByMsg/>
</dt>


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

9. Save your template and to see it works or not write comment in
     any post.Remember you must be logged in while commenting.

Here is some points to modify font color,style and background color.
this will be in first section.For make some changes change values
higlighed in CSS part.

border:1px dotted #254117;   For border out line and color

color:#oooooo;                       For Font color

font-style: bold;                      For Font Style

background:#ffffcc;                For Background color

Share: