How to Add an Admin Badge to Blogger Comments Using Profile IDs

Have you ever replied to your readers and wanted them to know that you’re the owner of your blog?

Many social media platforms and online communities use badges to identify admins, moderators, supporters, or other special members. You can do something similar in Blogger by adding a custom badge to specific commenters.

In this tutorial, you’ll learn how to add an Admin badge to your Blogger comments using only your Blogger Profile ID. And it’s not limited to just you! You can also use the same method to give badges to loyal readers, blog members, or other people you want to recognize.

For example, you could add an Author badge to contributors when they leave a comment on your blog. You can even take it a step further by adding a verified tick or another custom badge to your profile.

No External Plugins Required

Yes, you don’t need any external plugins or complicated systems. Blogger already provides enough built-in information to identify commenters—you just need to make use of their Profile ID or Profile URL, along with a little XML logic and CSS styling.

With a small script adjustment, you can automatically detect specific users when they leave a comment and dynamically display the appropriate badge next to their name.

Warning: Before making any changes to your Blogger XML, please backup your theme. This ensures that if a tag is misplaced or a script breaks your layout, you can restore your site in one click.

Step 1: Add XML Logic

1. Go to Blogger Dashboard, click Theme, and then click the small arrow next to Customize
2. Select Edit HTML, click anywhere inside the HTML editor, and then press CTRL + F (or CMD + F on Mac) to search
3. Search for the comment loop: <b:loop values='data:post.comments' var='comment'>
4. You want to place the following logic near the data:comment.authorPhoto.thumbUrl so the name and badge appears next to their avatar.

   <div class='user' expr:alt='data:comment.author' expr:data='data:comment.authorUrl'>
     <b:class cond='data:post.author.name == data:comment.author' name='auth'/>
     <data:comment.author/>
   </div>
   
   <b:if cond='data:comment.authorUrl contains "YOUR PROFILE ID"'><div class='adminBadge'> Admin</div></b:if>
   
   <!-- IF THERE ARE MORE THAN TWO SUPPORTERS -->
   
   <b:if cond='data:comment.authorUrl contains "PROFILE ID" or data:comment.authorUrl contains "PROFILE ID"'><div class='userBadge'> Supporter</div></b:if>

This code works by checking whether the commenter’s profile URL matches a specific ID. If it does, a badge is displayed immediately after their name.

To better understand how this works, here are the key Blogger variables involved:

• data:comment.author: commenter name
• data:comment.authorUrl: profile link (this is what we’ll use)
• "PROFILE ID": This is where you would paste the unique ID from your/their own Blogger profile URL.

How to Get Their Profile ID?

You can view their profile ID by going to their Blogger profile. Just click their avatar, and you’ll be redirected to their profile.

Alternatively, you can inspect it by right-clicking on the page and selecting Inspect, or by pressing F12. Then, search for their name or the link to their Blogger profile.

You can repeat this logic for as many roles as you want—admins, moderators, contributors, or any custom label that fits your community.

Step 2: Add CSS

Once the logic is in place, the next step is to define how your badges will look. Styling is what transforms a simple label into a visually appealing element that stands out without overwhelming the design.

1. Go back to your HTML editor and press CTRL + F (or CMD + F on Mac).
2. Search for these tags: ]]></b:skin> or <style>
3. Add the following CSS to your theme, before the ]]></b:skin> tag or within your <style> tags.

   .adminBadge,.userBadge{display:inline-block;padding:1px 6px;font-size:10px;font-weight:bold;border-radius:3px;margin-top:4px;text-transform:uppercase;cursor:help;}
   /* Admin */
   .adminBadge{background-color:#ff4757;color:#ffffff;}
   /* Supporters */
   .userBadge{background-color:#2f3542;color:#ced4da;}
   /* Styling for the username when it's the admin (Optional)*/
   .user.auth{color:#ff4757;font-weight:bold;}

4. Click Save

You can edit the badge CSS to your liking. Adjust the colors, size, spacing, and styling to fit your theme.

Step 3: Add More Badges (Optional)

One of the biggest advantages of this approach is its flexibility and scalability. You’re not limited to just Admin or Supporter roles. You can create as many custom roles as you need by duplicating the conditional logic and assigning each role its own class name.

Here are a few role ideas you could implement:

• Moderator: For users who help manage discussions and keep conversations organized
• Top Commenter: For users who actively participate in your blog’s comment section
• Verified: For trusted users or official accounts
• Contributor: For guest writers, collaborators, or other contributors

Each role can have its own unique styling, making it easier for readers to recognize different types of users at a glance.

You can also combine multiple profile IDs within a single condition using or. This allows you to assign the same badge to multiple users without having to repeat the same code for each person.

Beyond aesthetics, badges can also encourage interaction. When users see that active participation or loyalty can earn them recognition, they may feel more encouraged to engage with your content and community.

Consider adding a short note at the end of your blog posts or in your sidebar to explain how your badge system works. This helps readers understand what each badge represents and how they can earn one.

Pro Tips

• Always use exact profile URL
• You can add unlimited roles (Moderator, Helper, Verified, etc.)
• Keep badge styles small to avoid clutter

Final Thoughts

If something doesn’t work as expected, double-check your XML syntax. Even a small typo can prevent the condition from working properly.

With this system in place, you’ve added a powerful layer of personalization to your Blogger site, enhancing both its design and user interaction.

Also, learn more about the badges available on my website and find out how you can earn them!

If you want more customization options for Blogger:

• Blogger Tutorials
• Blogger Widgets