Add Admin Logo To Blogger Comments

I'm not sure if you noticed the comment section on blogs like "Techiemania" or "SML", they show a differentiation in comments between the admin and the visitor. Well, I do know that there are many tutorials around the web to achieve this effect on blogger but, I'm pretty sure none would be clear because, myself being a webmaster, end up on a confusing state once I complete reading the full article

So, I wanted this tutorial to be clear and pretty easy to install. I hope it is!!! Well, the final effect will be a simpler one - just an admin logo to differentiate between your comment and your visitor's comment. You may have a look at following screen shot to realize the final effect.

The basic coding evolves from the coding for "Multiple Author Info Box Widget". Well, in my example, I have used a very simple box-type image. You may replace it with any image of your choice. I recommend the logo used by "Spice Up Your Blog". Take a look at preview of the image here - Admin Logo Image Preview. So, let's get this installed on our blog.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, expand your template and search for the following block of code.

<b:if cond='data:comment.isDeleted'>

<data:comment.body/>

<b:else/>
<data:comment.body/>
</b:if>

2. Just replace the above codes with the following block of codes.

<b:if cond='data:comment.isDeleted'>

<data:comment.body/>

<b:else/>
<b:if cond='data:comment.author == "YOURNAME"'>
<div class='comment-admin'>
<data:comment.body/>
</div>
<b:else/>
<data:comment.body/>
</b:if>
</b:if>

Note: We did not use "<b:if cond='data:comment.author == data:post.author'>". If we do so, then every guest author on a multiple author blog would become the admin. So, to avoid that, we've used the idea behind the multiple author widget. If you run a blog with two or more admins, we have the coding for you as well. The same thing has to be extended but I'm sure you will go mad if I explain that. So, it's better you contact me via email for the coding (More than one admin for a blogger blog).

3. Replace YOURNAME with the name of the admin as it appears on the blog post. Well, the major part is over! Now, we need to add the CSS for "comment-admin" div section. To do so, search for the following piece of code on your template.

]]></b:skin>

4. Add the following piece of code just above the line mentioned in step 3.

.comment-admin {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfm4CuEC6DAH400PSEF21KRtdzXBX_bMaymQ15UnZ3MjmmArxUfnb7qQ-1I9-jtKvBH-BsUGMW3XUEWkNFxLX2qdCMctV8gnlUAFBrOfqlffc6XGq_0P6U60BvGXtqL1R2K19wHixAS9z3/s800/admin-logo.png") no-repeat scroll right top #FFF; padding-right:40px; margin-right:10px;}
.comment-admin p{margin-left:0px; margin-right:28px;}

Note: As I said earlier in this article, I have used a simple box-type image to display the admin logo. You may use any image of your choice. If you wish to change the image, then change the image URL - the one highlighted in orange. The padding and margin positions may vary depending upon your blog.
5. That's it! Save your template.

"If you would like to have an unique comment section for your blogger blog, then contact us via our services page and we'll let you know if we can design one for you! We'll install it on your blog too!"

I hope you liked this post. If you face any difficulties, then leave a comment below and we'll try to fix up the issue for you. Share your opinions about this post too via comments!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

mohammed glal said on July 6, 2011 at 4:39 PM :

thanks for post but when added code above ]]> it isn't appear. l correct code about author but admin logo appeared for all authors?

i will change admin word by writer :(

Mukund said on July 6, 2011 at 5:26 PM :

@mohammed glal: If you had replaced YOURNAME with the administrator name, it should work fine! Well, I did not understand your comment completely. So, it'll be better if you can send me a screen shot of your problem via email. I'll fix the issue for you!

Himanshu said on July 17, 2011 at 4:03 PM :

I couldn't find this code in my blog www.himanshu-software.blogspot.com

Mukund said on July 17, 2011 at 9:01 PM :

@Himanshu: Did you expand your template and check for the code? Even the default blogger templates possess them! So, I guess your template should also possess one! If not, send me your template via email! I'll have a look at it!

gamep01nt said on November 21, 2011 at 10:31 PM :

Hi Mukund, a simple question here. how can i do this but not for the admin, just for a particular commenter,

Say, A is a frequent commenter on my blog, so everytime A comments, i want to put this badge on A's comment. Any idea?

Mukund said on November 26, 2011 at 11:19 PM :

@gamep01nt: Just make sure you replace the author name with the one who usually comments on your blog. In other words, instead of YOURNAME in the above, use the name of the person who comments more often on your blog. Just try it! If not, I'll try to find out a code for the same!

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT