How To Create A Grab Button For Your Blog

Create a blog badge including code box for your blog sidebar

Moonlight Brooch

Blog Button / Blog Badge Tutorial

How do you make one of those grabbable blog badges? In the US they call them blog buttons, the ones with the little snippet of code that's really easy for a fan of your blog to quickly copy and paste?

In this tutorial I will show you how to create a blog badge for your site including the little text box with code to grab, just like this one below which you can add to your blog sidebar or within a post.

NB! If you have added a CBuk badge you can head over to the 'Become a Fan' page and submit a link to your blog - as this is not part of the blog directory, blogs outside of the UK are welcome to add links too (that's a first!)

Click Here

Step by step guide to creating shareable blog badge code

Create an image or advert. You could use a photo with some text or anything you like as the image, it doesn't need to be anything too amazing, just an eyecatching image or your logo. I use gimp software, its free and it works pretty well. Don't worry about the size of image too much as the code will take care of that. Most important is that any text is readable even when shrunk down to a sidebar badge size.
Create the Image Code - Once I had made the image I uploaded it to photobucket - it's really easy to open an account (and free) and it's a great place to store images.
Once you have your image uploaded to photobucket (or any photo storage place on the net) you need to get the code for that image. With photobucket under each image are a list of links, you need to copy and paste the "direct link".

My image link looks like this -
http://i951.photobucket.com/albums/ad358/haptree_photos/cbuksquare.png

The url address that I will be using looks like this -
http://www.ukcraftblog.com/2010/09/craft-blogs-list-of-uk-sewing-blogs.html

(If you ever get confused between the two, remember that links end in html and images will usually end with gif, jpeg, png or whatever file type they are - but not .html!)
Create the box code - Here is how to create the code for your advert/badge grabber. There are two parts to the code - the first part will show your image and the second part is the little box for people to grab your code.
<a href="YOUR URL ADDRESS"><img alt="Click Here" height="100" src="YOUR IMAGE LINK" width="100" /></a>
<textarea cols="31" name="textarea" rows="5" style="height: 100px; width: 100px;"><a href="YOUR URL ADDRESS"><img width ="100" alt="Click here" src="YOUR IMAGE LINK" height="100" /></a></textarea>
Add this code as 3rd party HTML gadget when you are in the blogger dashboard or as a text widget in Wordpress. Copy the code above adding your own adresses and image links where I have written YOUR URL ADDRESS and YOUR IMAGE LINK. With html code you have to be exact or it wont work so make sure you only change the text and leave all of these " " and these < / > and everything else in place!
Amend the dimensions. You will see in the code that there are height and width dimensions in pixels. If your image is square then change these to a proportion that not only fits the image you are using but also the column it will be added to, you don't want half of it missing. I would advise to make the code grab box the same size. Just experiment until you get it right.
NB. If you are changing the dimensions from 100 x 100 as above you will need to adjust the height and width in 3 places throughout the code where you see height and width written! They come in order - 1) is the actual image 2) is the text box size 3) the image size within code they will be grabbing.
Amend the 'Click Here' tag. If you want to change the text that appears when you hover over the badge you need to amend the 2 places where I have written alt="Click here" , just change Click here to whatever you would like it to say.

I hope this tutorial is fairly easy to follow - please let me know if there are any parts you would like me to explain further and I can edit this post to include additional steps - what confuses you is very likely to confuse others!

If your blog badges are all wonky and off centre here's a quick tutorial for centralising them! Tidy up and centralise your blog sidebars

PS - if this looks a little familiar it's because it was originally posted over on my (now a little unloved) blog Haptree and Me I've just updated it a little :)