How To Create A Grab Me Button

Hey Everyone!

When I was going about creating a 'Grab Me' button so that I could get involved in free button swaps, I thought it was going to be really hard, but it honestly isn't! So I decided to do a blogpost on how to make your blog button available to be grabbed of your blog, like this:

1. You need to create a logo, you can do this on Picasa (a free download from google, you can download it here) or on Photoshop (You have to pay for this, you can buy it here)

You can create this button by adding lots of photo's together or clip art, however you want to do it. I made mine on Picasa by creating a collage of pictures I had taken & then adding text. I resized it to 150pixels here .

2. You need to upload your photo to 'PhotoBucket' which you can find here , you do need an account to upload photos but this is completely free!

You must upload your picture to Photo Bucket

by clicking on the upload button.

3. Then you need to log onto your blogger dashboard, go to layout, and click on add gadget:

4. Then click on 'HTML/Javascript'

And click the + button in the corner.

5. Then you should see this screen

Change the title to 'Grab My Button' or something along those lines, and then in the content box copy & paste the following codes, don't worry that it has my information in for the moment, we will be editing that in a minute.

<div align="center"> <a href="http://beaumaquillagex.blogspot.co.uk" target="_blank"><img alt="Beaumaquillagex" src="http://i1245.photobucket.com/albums/gg594/Beaumaquillagex/JuneFaves2012.jpg"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="http://beaumaquillagex.blogspot.co.uk" target="_blank"><img alt="Beaumaquillagex" src="http://i1245.photobucket.com/albums/gg594/Beaumaquillagex/JuneFaves2012.jpg"/></a></center></textarea></form> </div>

Once you have copied and pasted that we will change some of the information.

Change the bits in pink to your blog address, make sure you leave the " marks, these are extremely important, if you accidentally delete this the whole thing won't work! Then change the bits in blue  to the name of your blog, again minding the " marks.

6. Do not save this yet! We still need to edit it more, open up another window/tab with your picture in photobucket, click on your picture and copy the 'Direct Link'

then go back to the code your are editing:

<div align="center"> <a href="http://beaumaquillagex.blogspot.co.uk" target="_blank"><img alt="Beaumaquillagex" src="http://i1245.photobucket.com/albums/gg594/Beaumaquillagex/JuneFaves2012.jpg"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="http://beaumaquillagex.blogspot.co.uk" target="_blank"><img alt="Beaumaquillagex" src="http://i1245.photobucket.com/albums/gg594/Beaumaquillagex/JuneFaves2012.jpg"/></a></center></textarea></form> </div>

and change the bits highlighted in orange to your direct link code, again minding the " marks, then press save.

When you go onto your blog you should have a blog button with a grab me box!

If not re read the steps to make sure you have done everything right, and make sure you mind the " marks!

Thanks for reading 

p.s check out my post on free button swaps! 

http://beaumaquillagex.blogspot.co.uk/2012/07/free-button-swaps.html