Make Visible Your Comments to Your Visitor

Make visible your comments to your visitor with different font,background and border so in this post I create a tutorial for "How to highlight author comment in blogger comment section."
Lets start and follow steps

Step 1 : Log in Blogspot.com

Step 2 : Go To Layout


Step 3 : Click on Edit HTML


Step 4 : Check on "Expand Widget Template"


Step 5 : Copy this script and put it before ]]></b:skin>

.comment-body-author
{
background: #fff; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #F98B09;border-bottom: 1px dotted #F98B09;border-left: 1px dotted #F98B09;border-right: 1px dotted #F98B09;
margin:0;
padding:0 0 0 20px; /* Position*/
}

Step 5: Find this code paste Red Code with following sequence:

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

Look Like this Example



Demo


Note : You can Change CSS Style
background: #fff; /* Background color*/
color: #00000; /* Text color*/

Related Posts by Categories

Customize Template

• How to Add Syntax Highlighting in Blogger Post?
• How to Make Mouseover Navigation Menu withh CSS?
• Yahoo Smileys Emotions Hack in Comment Section
• Customize Footer Section with Three Columns
• Share Your Articles on Google Buzz Another Good Social Nework For Blogger
• How to add Animated Sexy Social Bookmarks Blogger?
• How to make to Every Blog Post Summaries with Thumbnail?
• Protect Your Blogger Blog From Spam Comments
• Latest Cool Animated Recent Post Widget With Thumbnail For Bloggers
• Interact Your Visitor With Read More Feature
• How to make three Column Layouts in Blogger Template?
• How to add two ads below post title and increase earning?
• How to Install Recent Posts Widget with thumbnails?
• Show HTML/CSS Codes On Coloured Background In Blogger Posts

CSS

• How to Add Syntax Highlighting in Blogger Post?
• How to Make Mouseover Navigation Menu withh CSS?
• 50 CSS Layouts, Visual Effects and Forms Coding
• CSS Tab Navigation Scripts for Bloggers and Web Designers
• How to make to Every Blog Post Summaries with Thumbnail?
• Compress Your CSS to Increase Fast Loading Speed of Blogger Page
• Latest Cool Animated Recent Post Widget With Thumbnail For Bloggers
• Show HTML/CSS Codes On Coloured Background In Blogger Posts