Tutorial: How to Add a "Grab My Button" to Your Blog!

Originally posted by waterwaif on her blog here

I have been talking with other bloggers lately about trading ad space with each other for free for 30 day blocks. I think it's a fantastic idea, a great networking tool, and a way to support each other while still getting the word out for your shop or your blog.



But rather than have to email each other attachments every time you want to trade ad space, I realized that you can just add a Grab My Button! ad on your side bar for them to just, well, grab!


On the left sidebar is an example of a Grab My Button! and please, feel free to, um, grab our button.



Here's how you can add one to the sidebar of your own blog for easy grabbing:



1. First, make sure you have an ad or a button. The easiest way to do this, as I did, is to take a photo of one of your products and add your name or link to it with photoshop or a similar program. It's best to keep the image size under 200 pixels wide so it will fit in most sidebars.



2. Upload your new ad to any hosting site. I use http://photobucket.com because it is free, but there are a lot of options out there for web hosting.



3. Now, open a new tab or window and go to your blog. This tutorial only works with blogspot as I have never tried anything else. Log into your blog, click customize, then Layout, then page elements. Click 'add a gadget' and then select 'HTML/Javascript'.



4. Copy and paste the following in the text area:





<img src="http://YOURADURLHERE.jpg" /> <br /> <textarea style="text-align:center" rows="5" cols="20"><a border="0" href="http://YOURBLOGURLHERE.com" target="_blank"><img src="http://YOURADURLHERE.jpg"></a></ textarea>



5. Keep that window open and go to Photobucket, or whichever photo hosting you are using, and copy the direct link URL for your ad. Then come back to your blog window and paste that URL in both places where I've written YOURADURLHERE. Make sure you leave the quotation marks as that's what keeps a link active in HTML.



6. Then, see where I've written YOURBLOGURLHERE? Put your blog's URL there. Or your shop. Or whichever site you want to link to.



7. Make sure you save.



8. Go forth and multiply.