05 October 2009

Making a blog badge to grab tutorial

Do you want to make a badge available on your blog that other people can add to their own blogs?   The ones with the little box with code to grab just like this one below.  I'm hoping people might want to have this one on their own blog as it's a quick link to my giveaway HQ page for them or their blog readers and it's very sparkly and pretty. 

I also thought you might want to know how to make your own so I've written up this tutorial.

Click Here

You will need to have an image or advert. I made myself this animated gif above, 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.   I use gimp software, its free and it works pretty well.  I'll show you how to make an animated gif another week!

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. I use photobucket over flickr as they readily give you all the weblinks you'll need for using the 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 -


and the url address that I will be using looks like this  -


If you ever get confused between the two, remember that links end in html and images will end with gif or jpeg or whatever file type they are.

In order to create your badge grabber (is that what they're called!?) you will need to have your own image link and url address ready.  If you have an image already on blogger or in an online shop just right click and go to properties to find the link.  Or why not practise with my links if you haven't got your own sorted yet.

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="50" src="YOUR IMAGE LINK" width="200" /></a>

<textarea cols="31" name="textarea" rows="5" style="height: 50px; width: 200px;"><a href="YOUR URL ADDRESS"><img width ="200" alt="Click here" src="YOUR IMAGE LINK" height="50" /></a></textarea>

You need to add this code as 3rd party HTML gadget when you are in the blogger dashboard.  Just click on add gadget and this option will come up.  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!

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. (200 is about as wide as I can fit on mine and the height I am using is 50) I would advise to make the code grab box the same size.  Just experiment until you get it right, it's only a gadget so it wont in any way affect your template - you can just click remove at any point.

If you are changing the dimensions 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.

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 further explanation of and I can edit this post to include them.