How to Highlight Author Comments in Blogger (Blogspot) Blogs? This is a simple trick to Highlight Author Comments in blogspot blogs . This will make the blog's owner comments looks different from the visitors comments. It's very useful and interesting blogger hack. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.
1. Login to Blogger Dashboard
2. Then choose Design --> Edit HTML
3. Don't forget to backup your template first.
4. Chose Proceed to start editing the HTML code.
5. Check the "Expand Widget Templates" box.
6. Now (Ctrl+F) and find out ]]></b:skin> code.
7. After finding the above code simply add the below code before above code.
8. Now Scroll down to where you see this:-
9. The Blue color text is the code that you have to add to your script. The position must be right.
10. Now click Save Template and you are done.
Note: You have to logged in into your blogger account before you give comments.
1. Login to Blogger Dashboard
2. Then choose Design --> Edit HTML
3. Don't forget to backup your template first.
4. Chose Proceed to start editing the HTML code.
5. Check the "Expand Widget Templates" box.
6. Now (Ctrl+F) and find out ]]></b:skin> code.
7. After finding the above code simply add the below code before above code.
.comment-body-author
{ background: #E6E6E6; /* Background color*/
color: #000; /* Text 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; /* Posotion*/
}
{ background: #E6E6E6; /* Background color*/
color: #000; /* Text 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; /* Posotion*/
}
8. Now Scroll down to where you see this:-
<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>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<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>
<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>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<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. The Blue color text is the code that you have to add to your script. The position must be right.
10. Now click Save Template and you are done.
Note: You have to logged in into your blogger account before you give comments.
