Add An Admin Badge Plus Differant Style Colors To Author Comments On Blogger




| 37 comments

Admin comments badge and style on bloggerIn the comments here on Spice Up Your Blog when i as the admin or author, post a comment in the bottom corner there is a sparkling animated badge with the word 'Admin'.I have received so many requests to cover this in a tutorial so today i will show you how it's done.OK so back in April i published a post showing how to use different colors on the authors or admin comments on Blogger and we actually use the very same technique here but this time with a background image.While i will give you the URL for the admin badge i have been using and everyone seems to like so much you can use any image.

Now while we are adding the admin badge or image we might as well add some more styles to the author comments so they stand out, it does not require any extra work so why not.To that end i have also included the Css for your comments to have a different background color, Different border color and the border will have rounded corners.Lets look at the demo :

View Demo Button

Now i have broken this tutorial into two sections, everyone can follow the first 4 steps.Then we have separate steps for people with templates from the Blogger template designer and people with custom or older blogger templates.This accompanied by the nature of the tutorial makes it a little harder, but I'm sure you can do it just take your time.

Adding The Admin Badge To Author Comments


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In your Blogger dashboard click > Design > Edit Html > Tick The Expand Widget Templates Box :

Design Edit Html Widget Templates

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and Paste the following code directly Above / Before ]]></b:skin>

.comment-body-author {
background: url("http://spiceupyourblogextras.googlecode.com/files/admin.gif") 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 URL is highlighted in yellow and you can change that to use a different image.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 go to this chart - Hex Code Color Chart.

Step 4. Save Your Template, But we are not finished.

In the next step you need to find a section of code in your template and add two extra snippets of code to it.When testing this i found older and custom Blogger templates are different to templates from the Blogger templates designer.For that reason i have two separate methods.The first is for people with Blogger templates that are not from the template designer the second is for templates from the template designer....Got It ....

Users With Custom And Older Blogger Templates Follow These Steps


Step 1. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line (Use The Ctrl F Search Method) and work from there.If you cant find the first line look for the second line, remember Blogger templates can have different code so it might not look exactly the same.

<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 to it.You can see the two snippets and were i have 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. Once your happy you have the code in the right place you can save your template and check it out.

Users With Templates From The Template Designer Follow These Steps


Step 1. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line (Use The Ctrl F Search Method) and work from there.If you cant find the first line look for the second line, remember Blogger templates can have different code so it might not look exactly the same.

<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 to it.You can see the two snippets and were i have 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. Once your happy you have the code in the right place you can save your template and check it out.

OK that was tricky so i hope you were able to follow and style the author comments on your blog.Make sure to check out more of the great posts and tutorials on Blogger comments.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

37 comments:

  1. Awesome post
    great thanks
    try it now

    ReplyDelete
  2. I would love to have this feature on my blog but can't get it to work!

    ReplyDelete
  3. I added but after Users With Custom And Older Blogger Templates Follow These Steps
    I can not find code, I am using template of Thesis Blogger Templates
    please help me to add it in my blog
    Thanks

    ReplyDelete
  4. i am using disqus. shall i use this trick in my blog?

    ReplyDelete
  5. Could u plz say me how to move the admin icon move little bit left side

    ReplyDelete
  6. i ve lost my blogger comment box after i failed to do this steps and re upload saved template ....:(

    what happened ? pls help

    my blog ...http://malayalambloghelp.blogspot.com/

    ReplyDelete
  7. Wow! It's pretty amazing Paul! I posted an article about the same stuff on my blog last night and you posted the same too! But, the coding involved is different and the CSS too!

    Moreover, the above coding in your article will cause trouble to blogs which have multiple authors. In other words, every guest author on a multiple author blog would become the admin which might not be the case. So, you may refer to my article (Add Admin Logo To Blogger Comments) to solve this issue.

    ReplyDelete
  8. Yes i m mail you sir for this request 2 before our tut i got this solution but thanks sir.

    ReplyDelete
  9. Bug in this code see my blog link
    http://test6577.blogspot.com/2010/04/make-your-windows-xp-genuine.html?showComment=1309857475822#c3434395758469698367

    Sir the comment goes down the image of author.
    how to solve this problem.

    ReplyDelete
  10. @ All thanks for the positive comments.

    @ Mukund - Have you ever heard the saying 'Great minds think alike'? I think having the admin badge for all the blogs authors would not be a bad thing but your tutorials is a great way for differant authors to have differant badges.

    @ Sachin - You are doing your best to copy this template :D You need to add some top margin to your avatar to push it down.

    @ Noushad - I can see comments, did you get it fixed ?

    @ Hari - This is only for Blogger comments I'm afraid.

    ReplyDelete
  11. Αnother excellent article, it works perfectly,

    thank you

    ReplyDelete
  12. How to add Paul sir how to add margin to my avatar to push down comments.

    ReplyDelete
  13. @ sachin - i dont know the exact css code for your comments but if you find something like img.avatar that should be it and you can change the margin.

    ReplyDelete
  14. Can you give me exact code sir. nothing in my template likes img.avatar.

    ReplyDelete
  15. Really you have done a good job. The written style is very prompt and the highly practical manners. So fruitful for us

    ReplyDelete
  16. Found the first part of code no problem. But don't have the second part of code anywhere in my html.
    Where do I paste the second part?

    ReplyDelete
  17. A very nice article but i am using Disqus so can you tell me how to insert this admin logo in to that.

    ReplyDelete
  18. Boss, if i "Use A Different Background Color For The Authors Comments On Blogger" , the background colour is change or what? coz i already follow ur step, but doesnt work for my template.. so i read artikel from Mukund n its working for the admin badges.. the problem here now, background colour for ur tutorial "Use A Different Background Color For The Authors Comments On Blogger" its not working.. what should i do?

    ReplyDelete
  19. Hi,
    First of all, I want to thank you for your great blogger tutorials, BUT some of them aren't that obvious. For example, I can't get this one to work, but that might just be the fault of my Disqus?

    ReplyDelete
  20. @ TheOnly - This is for Blogger comments only and wont work on Disqus.

    ReplyDelete
  21. Is there a way to do this for anonymous comments?

    ReplyDelete
  22. @ Kris - I dont understand the question.

    ReplyDelete
  23. Hi Paul,
    I just checked the link where you had the image store http:// spiceupyourblogextras.googlecode.com/files/admin.gif and it is not stored there anymore... Is there anyway to get the sparkling admin image from you.. I love it and have no problem in storing it on my server.

    Thanks Dsuti

    ReplyDelete
  24. Wow, I really like this one. Thanks so much and also for taking the time to explain in detail.

    ReplyDelete
  25. Amazing information. Thank you so much. I applied to my blog.
    But it is only for the Authors Comments. How I can design other comments with comment separator and serial nos as you designed.

    ReplyDelete
  26. hello, i have a question here, i successfully done with your tutorial, thanx.

    My question is : How can i highlight a specific person's comment?
    For example, this guy A is a frequent commenter on my blog, so i would like to highlight his comment. is that possible?

    ReplyDelete
  27. Hi Paul...
    There is an error with the background link in the code of ]]><Skin
    Kindly correct that.

    ReplyDelete
  28. Thank you once again, great little trick to use.

    ReplyDelete
  29. Thanks for it.its amazing dear......

    ReplyDelete
  30. Nice info i will try for my blog....Thanks..
    http://Itbooster.blogspot.com

    ReplyDelete
  31. Fantastic post and Thanks for sharing this info. It's very helpful….

    ReplyDelete
  32. Love the way you teach. Thanks.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us