How To Add A Blog Button

<center><a href="http://www.creekbedthreads.com" target="_blank"><img src="http://i786.photobucket.com/albums/yy143/erinsue1/blogbutton1.jpg" height="125" width="125" /> </a></center>

For a while now, I had been wanting to add a button to my blog that others could grab as well.  As you see (to the right) I was finally able to do this!  It wasn't quite as easy as I thought, so I am going to explain it here so that everyone can give it a go.

1.  First, you need to design your button.  If you're an Etsy seller, you could use your avatar, or design something new!  I won't go into too much detail here, but you'll want it to be at least 125x125 pixels.

2.  Now, you need to host the image somewhere.  I normally use Flickr to host my photos, but their rules say that all images must link back to their site - but we want your button to link to your blog, not flickr!  So instead, I've used photobucket, since I didn't see any rules like that there.

3.  Once it's there, you'll notice that there are some links below or to the left of your image, giving you the location of your picture.  You want to copy the "direct link", which will look something like this "http://i786.photobucket.com/albums/yy143/erinsue1/blogbutton1.jpg".  I'm going to refer to this URL later as IMAGE SOURCE.

4.  Now that your button is 'hosted', you want to add it to your blog.  If you use blogger, all you need to do is go to your blogger home, and click the layout tab.  Now click "add a gadget", and choose HTML.

<center><a href="YOUR BLOG URL GOES HERE" target="_blank"><img src="IMAGE SOURCE GOES HERE" height="125" width="125" /> </a></center><center><textarea cols=”15″ rows=”4″ wrap=”virtual”><center><a href="YOUR BLOG URL GOES HERE" target="_blank"><img src="IMAGE SOURCE GOES HERE" height="125" width="125" /> </a></center></textarea></center>

5.  Now we need to format the code that you will put into this gadget.  Below is the code that you will use, and this will show your button, plus add a text box containing the code for your button that others can copy into a widget on their blog!

6.  You can customize this code if you'd like, the things you'll want to focus on are where it says height="xxx" and width="xxx".  If you want use a button size other than 125x125 you'll want to adjust these.  I would recommend the 125px square, but it's not necessary, I've seen larger ones around 150 or 175px square.  Another thing to customize, if interested, is the alignment.  I have it set to center, because that's how it looks best in most layouts, but you may want to remove the tags and everywhere they appear in order to have the text alignment to the left.

7.  Now just copy your code into the gadget, and save... it should be on your blog now!  As always you can drag the gadgets around in the blogger layout page to customize where this will show up.

If you have any questions at all, please feel free to comment, and I will try to answer your questions.  I am not an expert in coding, but have figured out a few small things like this, so I will do my best!