This is becoming a very popular trend in the blogging community.The hack is simple and the effect is used to make the admin comments stand out and let people easily see which comments are yours.Regular readers will have noticed i have been using the hack for a while and all my comments have a black background with white text while all other comments have a white background with black text.Once you have made the change all your comments will show in a different color and you can choose the color schemes it does not have to be black and white like i use.A few months back i had been considering using a different comment system like discuss or intense debate but decided to Spice up the default blogger comments instead and there is a lot you can do with the Blogger comments, i will be covering more comment tips in future posts.
This trick is a little harder as we need to make a few changes so make sure your template is backed up.
So lets change your comments
Step 1. In your dashboard click ►'Layout' ►'Edit html'► Tick the 'Expand widget templates' box:
]]></b:skin>
Step 3. Place the following code Directly Before or Above ]]></b:skin>
.comment-admin {
clear: both;
margin: 10px 0 14px 0;
padding: 10px;
width: 400px;
background: #000000;
color:#ffffff;
}
Note: The two parts highlighted in red are the Background Color and text Color they are currently the same as mine using a black background and white text :
Background: #000000 (black)
Color: #ffffff (white)
This next bit can be a bit tricky as you need to replace a large section of code so take your time
Step 3. Find the following section of code in your template
Tip: Use CTRL and F to look for the first line and then locate the entire section.
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
Step 4. Replace that entire section of code with the code below :
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-admin'>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
Once you have it replace click save and check out your new comment section !
Hopefully you will get it first time but as long as you have your template backed up you can repeat until you get it right.
