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

3 comments:

sunl said...

This is an example how author comment will be look like in your blog comment section. I make changes in my blogs so you can change too or remain it as in default.

laptops said...

Nice and cool blog.. everyone makes mistakes.. go ahead and keep posting..

lifesimpressions said...

man this is very nice, will follow this blog!

Post a Comment

You are welcome to ask any questions and submit suggestions related to post

 

Home | Make Money By Links