BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

How to add Badge to Blogger


Blogger Badge is the one of the best ways of building your backlinks effectively, since many blogger see Grab Button Blogger Badge but yet don't know how to Create and Install it on your blog, so I'am writing this tutorial about "Adding Bloggerhero Badge to Blogger"

What is Blogger Badge ?

Blogger badge is just a button which contains the Url or link address of any site you have specified. Its a littile button as shown in the picture above, when you click on that badge it redirects you to the definite Blog/Website.

Care to Add Our Badge?

Do you love us ? Then copy this code and add our badge to your blog/site ;-)
<a style='text-decoration:none;color:white;text-
transform:uppercase;background-color: #00C4FF;padding:4px;border:4px solid #00B5EC;border-radius:8px;font-
weight:bold;font-family:georgia;border-bottom-left-radius:2px;border-top-right-radius:2px;text-shadow:1px 1px 
1px black;' target="blank" title="Best Blogger Tricks, Widgets, Computer , Internet Tricks and Many More" 

Adding the Badge to Blogger

You need to create your own blogger badge for adding it to your Blog/Site. 
For that is the best option for creating any kind of Blogger Badge.
Go to , fill the details correctly.

Customizing Your Badge :

Type your blog name in boxes, pick up beautiful and Fresh Colors for the Badge.
Type Left Text, Right Text, Choose thier colors , choose background.
Important : Now tick " " Option and Hit "Create Logo"
Thus you have created the Badge for your blog ! Now upload it to
And get the direct link for your badge [after uploading select it from the options]

Don't Forget to Check New Updated, Beautiful CSS Blogger Badge !

Installing the Badge on your blog

Now go to blogger > Layout > Add Gadget > Select HTML/Java Script.
<div dir="ltr" style="text-align: left;" trbidi="on"> <center> <div dir="ltr" style="text-align: center;" trbidi="on"> <a href=""><img alt="" src="" title="Blogger tricks" /></a></div> </center> <center> <input onclick="this.focusundefined);this.selectundefined)" readonly="" type="tricksteacher1" value="&lt;a href=&quot;www.;&gt;&lt;img alt=&quot;&quot; src=&quot;; title=&quot;Blogger tricks&quot; /&gt;&lt;/a&gt;" /> </center> </div><div dir="ltr" style="text-align: left;" trbidi="on"> <a href="">grab this</a><!--Grab Our Button Widget--></div> </div>
Paste the above code and change with your blog address and with your uploaded badge url.

Click save you are done, move the gadget to anywhere you want to show.

Note : Please dont remove the attribution link We have added to this widget.

Drop your comments here and please share this post if you like :-)
and yeah, dont forget to add our Badge to your Blog/Site :-)

Update - Add CSS Beautiful Badge to Blogger


  1. Attractive section of content. I just stumbled upon your site and in accession capital to assert that I acquire actually enjoyed account your blog posts. Anyway I’ll be subscribing to your augment and even I achievement you access consistently fast.
    website design

    1. Thanks for your valuable comment, Website Design.
      Stay connected :)

  2. Interesting blog. It would be great if you can provide more details about it. Thanks you

    Web consultancy & seo consultancy

    1. Stay connected for more detailed postings :)

  3. Actually,I like your post.
    I would like to say this is an excellent site that I have ever come across. Very informative. Please write more so that we can get more details. i am marketing consultant do you need some details about design and development please come in this link:


Powered by Blogger.