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:
<div align="center"><a href="http://amindwandering.blogspot.com" title="Perpetual Chaos of a Wandering Mind"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx1KDiiuSRZTQQEB3BJHsRnWaWZ-JD6nCg6m0y1jHn6BeJn7VDE44TPQah-PN1JIJKizN5gBD4mtZOG91R5xlhXejfGEuCQoS4nyEMLiCqvTTS2ofvE0wXmIIoPwetaWPTM_oUNmeGvsnE/s170/badge170.png" 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 MyCoolRealm.com have made a code generator that writes the code for you. Here's how you do it:
- 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 ESPPhotografic.com 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.
- 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.
- Visit http://www.mycoolrealm.com/sandbox/gbgen/ 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.
- After you've filled in the fields, preview your badge/button to make sure it's how you want it.
- Click on the "Grab My Button" code generator and the entire code you need will appear. Copy it all (ctrl
A, then ctrl C). - 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.
*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
2 comments:
great post!!!!!! i am your newest gfc follower:) you can find me at http://andreaheltsley.blogspot.com
Cool, Andrea. Thanks!
Post a Comment