Blogger Tools: Badge Grabs

Okay.  One more really quick post tonight.  Most bloggers don't take very long to find out that one of the best ways to increase traffic on your blog is for other like-minded bloggers to share links to your blog.  The best way to make your link visible is to make a badge.  Bloggers like to swap badges/buttons (two names, same thing).  You can find a few of my favorite sites here.

Badges can be simple or snazzy, a few minutes fiddling on Adobe Elements or  Techsmith SnagIt can produce something simple (which is what you want so other people can use it), the real trick is getting the code for your blog that makes the script that makes the badge code grabbable.  Like this:

Perpetual Chaos of a Wandering Mind
<div align="center"><a href="" title="Perpetual Chaos of a Wandering Mind"><img src="" alt="Perpetual Chaos of a Wandering Mind" style="border:none;" /></a></div>

Without that spiffy little window of code that bloggers can cut and paste, you've got nothin'.  I can produce the code in the window, but danged if I can figure out how to make the window, but, lucky me!  I found a site that does it for you for free.

The good folks at have made a code generator that writes the code for you.  Here's how you do it:

  1. Create an image.  Make sure you own the copyright or have permission from the person who does own the copyright.  The background for this blog is a Blogger image, so I can't mess with it like I'd like.  However, I use Bluebell Wood from for my other sites and have permission to use it, so I do.*  Lots of blog template designers provide buttons either as part of the package or as an add-on feature.
  2. Once you have your image, upload it to an online album like Picasa or Photobucket, etc., and make it accessible to the public.  Mine is in the same album all my blog images are kept it.  Copy the URL.
  3. Visit and fill in the data fields, pasting the URL for your image in the appropriate text box.  I didn't mess around with any of the colors for backgrounds or borders and got exactly what I wanted, a transparent background.
  4. After you've filled in the fields, preview your badge/button to make sure it's how you want it.
  5. Click on the "Grab My Button" code generator and the entire code you need will appear.  Copy it all (ctrl A, then ctrl C).
  6. At your blog, in the template, add a widget for HTML code, then paste the code you copied from the Grab My Button code generator and save.  Voila! You've got a badge/button for bloggers to grab and direct their readers back to your site.  Nothing to it.  
Is that cool or what?   Oh.  And, grab the badge!

*Note:  Since the original post, I have changed the badge.  I downloaded my compass image from Xooplate, a site offering free open-source templates and images.

—A Chaotic Mind


Drea Shane said...

great post!!!!!! i am your newest gfc follower:) you can find me at

Unknown said...

Cool, Andrea. Thanks!