How to Add Support or Promote Us Badge in Blogger Site?

How to Add Support or Promote Us Badge in Blogger Site?


Webmaster can see many website and Blog add a small button at the sidebar or footer section added Support Us or Promote Us badge with link or 1 click installation option. Generally this badge used for loyal readers thus they can easily add their favorite Blog's Badge for promoting or for Bookmarking the site. So today I will show you how we can add the Badge widget in Google Blogger Site. But before proceed you have to create a badge That written your website or Blog name. The Badge image resolution should be 80px width and 15px height. You can easily create a badge with different photo editing software. If you have basic knowledge about  Photoshop then it will be very easy to create. Or you can create Badge from online tools. Assume that you have created the Badge and uploaded in image hosting server, and already got the badge image link. You can host image in Blogger Static page or any other third party image hosting server like Photobucket, Flickr.


Now for adding the Badge follow the below steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget.

<div class='BSprofileBorder'>
<div style="text-align: justify;">
<span style="font-size: 15px;">
<p>We are continuously providing free Tutorial and Resources for our honorable readers. If you have really benefited from our small effort then please show our badge on your site as a symbol of tribute.</p>
<div dir="ltr" style="text-align: center;" trbidi="on">
<a href=""><img alt="" src="" title="Blogger Spice" /></a></div></center>
<input onclick="this.focus();" readonly="readonly" type="text" value="&lt;a href=&quot;;&gt;&lt;img alt=&quot;&quot; src=&quot;BADGE IMAGE URL HERE&quot; title=&quot;Blogger Spice&quot; /&gt;&lt;/a&gt;" />
<center><p>You Can Connect us Directly</p><center>
<form action="" method="post" target="_blank">
<input style="display: none;" value="My Favourite Site" name="widget.title" />
<input name="infoUrl" value="" type="hidden" /><input name="logoUrl" value="" type="hidden" />
<textarea style="display: none;" name="widget.content">&lt;!-- Dont edit this code or it will not work --&gt;&lt;a href="" rel="dofollow" target="_blank" title="Blogger Tricks"&gt;&lt;img alt="Blogger Spice" border="0" height="15" src="" width="80" /&gt;&lt;/a&gt;&lt;!-- End;
<br />
<input style="border:0px;" src=" " value="Link To Blogger Spice" name="go" type="image" />
Step 5 Finally hit the Save Button.


  • Replace all with your Blog or Website address.
  • Replace BADGE IMAGE URL HERE with your image link.
  • You can change the text according to your own language.
Now check your Blog to see the beautiful Support us or Promote US Badge with manual and 1 click installation option. A reader or viewers can use manual link to add your Blog Badge on their Blog or by clicking on Add to Blog icon they will able to add this widget.  You can place this badge in your Blog sidebar or footer or header section. Create small Badge image that won't occupy large space on others Blog. If you have any query regarding this write me to solve the issue. 
Open Comment Box
মোঃখায়রুজ্জামান বাপ্পি says: 1/12/2015

Super POST.Thanks.
Sir blog ar name akta toolbar banabo kivabe.Jemon oneke google toolbar banay.but ota akhon bondo.AMA KAVABE akta Nice toolbar banabo?
Help Me>

Mohammad Fazle Rabbi says: 1/12/2015

Toolbar Bujhlam na. tomar kace kono demo image ace? thakle amar email a send koro.

Contact Form


Email *

Message *