Creating a Blog Badge/Button

Holly asked a good question: how do you create a blog badge?

Basically, a blog badge is an image that is hard coded to open a website when clicked on. It is a great image brander and it better at getting a possible reader's attention than just a link.

So how do you make one?

First, decide on the picture you want to use. You can either use one already made (i.e. a snapshot of something), or create a new picture. If you're talented enough, you can create a picture using a program like Paint or (if you're lucky enough to afford it) Photoshop. Another avenue, for those not artsy enough to design their own and don't want to use a photo, is to take a snap shot of their blog header. Mommy Moment, one of my favorite blogs to read, ran this awesome tutorial a little while back: http://www.mommymoment.ca/2010/04/how-to-make-your-own-button-graphic.html. Make sure you save your work as a JPEG or PNG.

Okay, so you have your image created, now what? You'll have to upload it somewhere so that you get an image URL. Any photo gallery website will do this and in the past I have used tinypic.com, photobucket.com, and good ol' Facebook. If uploading to the first two, once it's completed, it'll give you the URL code automatically. Copy this code. If using Facebook, right click on the image when viewing the picture:

In Internet Explorer, your next step is to click on "Properties" and then copy everything under "Address". In Chrome, you'll only have to select "Copy Image URL." It's something very similar in Firefox, and you're on your own for Safari. 

Next step: hard coding the image. On a HTML field, use the following code:

*<*a* href*="YourBlogWebAddressHere" target*=*"_blank"*>*<*img *src*="YourImageURLhere" *border=*"0"*>*<*/*a*>

(Take out the *s as they were used to show you the coding.) The most thoughtful way to have this set up is to have the badge open a new window or tab (depending on how the reader has the browser set) when clicked on. The "target=blank" part does just that.

Don't know where to put the HTML? Under Blogger, look for this screen under "Settings" and then "Layout" and add a new HTML gadget:

Since this blog caters to The Bump, to add to your signature, click on "My Bump" and then "Edit my Profile." Add the code to the "Signature" box and press "Save Changes."

And if all goes well, you should have your own blog badge. If only I get off my tush and create one for this site...


Tried these directions? Did they work? Need clarifying? Share your comment!