Add An Admin Badge And Different Style Colors To Blog Author Comments On Blogger

In this article i am going to share a wonderful hack with all of you.This hack is specially created just for Our Readers.In this post i'll tell you how to add Admin Badge and different colors to Blog Author Comments on your  blogger blog.If i am the admin and author of my blog tekleisure.blogspot.com and i want that when anyone comment on my blog the color of that comment would be different and when i respond or comment on my blog articles the background color of that comment is different from others, and also my comment contains a cool Admin bade with it, this is a unique feature of comments but unfortunately blogger doesn't provide this facility.

So today i am here to tell you how you will be able to add some different colors and admin bade to your blog comments.

 Now while we are adding the admin badge or image we also add some different styles to blog author comments  so they stand out, it does not require any extra work so why not.?? At the end i have also added some Css which changes the style of blog's comments like rounded corners, changed background colors and different border colors etc.Lets have a look before starting the tutorial.

Now i have broken the tutorial in two parts, everyone have to follow the first 4 steps and then i have separate steps for people with templates from Blogger template designer and people with custom or old blogger templates.That's why this tutorial looks a little harder but i know you can do it easily.

Adding The Admin Badge To Author Comments

Note: First backup your template before editing your blog's HTML (How To Back Up A blogger Template)

Step 1.) In Your Blogger Dashboard Click On Design > Edit HTML > Tick the Expand Widget Template Box:

Step 2.) Find the Following code in your Blog's HTML (Click CTRL + F for search bar to help find the code).

]]></b:skin>

Step 3.) Copy and paste the following code directly above/before ]]></b:skin>

.comment-body-author {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPoIro4Mme218plE8RuobTz9-lekITclRpSUfVJSQhQR1UQ1cxI89eABPppjI1-CWJCKI5f8Iz7SRdcpAtX4iSdBRjD0jPApObUFmBiohHmOaFj5BtWM9sRPwqP8bw8U1aO64_8K1OVv2/s800/admin-logo.png") no-repeat scroll right bottom #BFE3FE;
border: 1px solid #80C8FE;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
padding:5px 35px 3px 3px;
}

Note:The image is Highlighted in yellow and you can change the image if you don't like the image which i added.The colors are also highlighted, in Green is the background color and in blue is the border color.To get the Hex code for the colors you want to go with this chart-Hex Color code chart

Step 4.) Save your template but we are not finished.

Now we have to add 2 extra snippets of code into the HTML.When i am testing these codes i found the old blogger and custom blogger templates are different from Blogger template designer so that's why i have to add 2 different sections for all blogger templates.The first is for the people with blogger templates that are not for the template designer and the second is for the templates from the template designer....Got It.....

Users of Custom and old blogger templates follow these steps.

Step 1.) Find the following section of code in your Blogs HTML but to finding the whole section is much difficult so find the first line of this section and check the all lines are same or not.To find the code in your Blog's HTML Press CTRL + F for search bar for help in finding the code.

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

Step 2.) Ok you have located the section of code, we now add two snippets of code into it.You can see the two snippets and where i had added them below in red.

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

Step 3.) When you placed the code in its right place you can save your template and check it out.

Users with templates from Templates designer follow these steps

Step 1.) Now same as above we need to find the following section of code and have to edit this code but its quite difficult to find the whole code so that find the first line of the code in your Blog's HTML (Press CTRL + F for search Bar for help in finding the code)

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Step 2.) Ok you have located the section of code, we now add two snippets of code into it.You can see the two snippets and where i had added them below in red.

<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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

Step 3.) When you placed the code in its right place you can save your template and check it out.

Ok this is a little tricky so i hope you all will able to add the code perfectly in your Blog's HTML and check your new author's comment design on blob and if you finding any difficulty in placing these codes so leave your comment below.

If you have any questions and Suggestions drop your comments below.