18 March 2009

Add different style for blog author / admin comments

Advertisements

You visit various blogs and make comments. You see the comments posted by some blog authors are in different style than the comments published by visitors.

So here is easy procedure to add different style for blog author / admin comments.


Make sure comments are visible. Go to Blogger Dashboard >> Settings >> Comments >> Show >> Save Settings.

Now go to Layout >> Edit HTML. Before editing your template, you may want to save a copy of it. Download Full Template.

Click on the “Expand Widget Templates” option.

Hit CTRL+F and look for "comments-block”. You will get following block of code(in black). Add the code (In Green)

..........................................

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


..........................................

Now hit CTRL+F and look for “comment-body”. Here I am giving codes of Minima and Rounders template.

Minima template

..........................................

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

..........................................

Now add new code below above code

..........................................

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #000033;
background:#ffffcc;
}

..........................................

You can change the padding i.e. space around the text. Change the background color and border color. ( Get color code values)
You can also change blog author comment to any other text. Keep dot (.).


Rounders template

..........................................

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}

..........................................

Now add new code below above code

..........................................

.blog-author-comment {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.blog-author-comment p {
margin:0 0 .5em;
padding:0 0 0 20px;
color:#0033cc;
font-style: bold;
}

..........................................


For other templates just look for “comment-body”. And try one of the above code (in green). Try various colors, borders and styles.



Read about How to add Insert a background image to the author's comments

Related Posts

4 comments

August 18, 2009 at 9:31 PM

Awesome!! Thank you. this was exactly what I was looking for. Really easy to understand. Thank you soooooooo much!

August 22, 2009 at 5:07 AM

Cool! Thanks for sharing it. I'm using it currently on my blog :)

March 11, 2010 at 6:36 PM

thank you
sharm

http://www.sharmlifeblog.com

June 1, 2011 at 4:58 PM

Thanks for this!

Anatoly

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More