How To Make A Blog Badge (with grab code)

UPDATED CODE- October 2014

There is a great trend at the moment for sharing the blog love by displaying a button to show your affiliation.  The usual places for these are in the sidebar of your blog or on a separate Affiliate page.

This tutorial is designed to help you create your own badge and to show you how the HTML code is constructed.  This gives you a bit more understanding so that you can create buttons for almost anything - to click through to pages on your own blog, to promote all posts under a certain label or even to point your visitors in the direction of a guest post you have written.

Step 1
Find a picture that you would like for your button.  You can use any image you like but preferably a picture that you have taken yourself or a free* image from the internet.  A bright image is good but relative to the subject is better.

Step 2
Use the direct link code
Upload your image to an online storage website (or your own hosting area).  If you have one with facilities to edit your image this will make it easier for novices (like me).  I use Photobucket but there are other similar storage and editing websites out there**

Step 3
Edit your image (in Photobucket or similar) to approximatly 120 x 120 pixels - any smaller and it will not be prominent enough, any bigger and it might take over someone's sidebar and discourage them to display it.  At this point you can also add any text to help promote your cause.

Step 4
Now to code everything up.  I will use the HTML that I created for my own button and colour-code it for simplicity.  If you copy the code below into "notepad" and change the necessary links/information you will be able to save your code on your own computer.

<!--grab button header --><div class="grab-button" style="width: 150px; margin: 0 auto;"><img src="YOUR IMAGE CODE" alt="Grab button for YOUR BLOG NAME" width="150" height="150" /><!--end grab button header --><!-- button code box --><div style="margin: 0;padding: 0;border: 1px solid gray;width: 150px;height: 150px;overflow: scroll;"><div class="YOUR-BLOG-NAME-button" style="width: 150px; margin: 0 auto;"><a href="YOUR BLOG URL" target="_blank" rel="nofollow"><img src="YOUR IMAGE URL" alt="YOUR BLOG NAME" width="150" height="150" /></a></div></div> <!--end grab-button --></div>

  • The yellow section is the exact link you want your visitor to be direct to when they click on the button
  • The red section is the direct link to the uploaded image
  • The green section is to help with screen readers.  You can put any text here for screen readers to describe the image.
  • The blue section is the sizing of the image to be displayed.  Adjust these to whatever you prefer.
  • The black text is basic HTML and should be kept as displayed.

For information only
The first section displays the button
The second section displays the "grab code" in a handy box

Step 5

To place this widget on your blog sidebar use the HTML/JavaScript widget facility in your blog dashboard - simply copy the text and paste it into the widget box, then save.  If you're like me and prefer things centred then add <center> at the beginning of the HTML and </center> at the end of it.


If this post has been useful then I'd love you to say 
"thank you" by displaying my blog badge in your sidebar

Grab my button
and link to my blog

NB: If you are using (free, not self-hosted) then you will need to add the code into a "text widget" and place in your sidebar or footer.  You cannot use this code in the body of a post.  

NB: If you want to amend any existing badges on your blog to make them "nofollow" in accordance with Google Webmaster recommendations then please note where the "rel=nofollow" code should appear.  Find the URL (blog link) and place your cursor at the end of it.  Hit the space bar once and insert the code rel="nofollow".  Save the code.

* the best way to search for a free image on Google Images is to click advance search and use the drop-down menu to search for images "labelled for reuse with modification".  You can also use Flickr.  Use the search box for your theme, click "advanced search" then tick the three boxes at the bottom that allow you to search within the Creative Commons-licence content, to use the image commercially and to adapt that image.  I always find it polite to comment under the chosen image and link to the uploaded, adapted version

** if anyone has any recommendations please let me know in the comments section.