Saturday, March 20, 2010

How To Add A Blog Button

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 "".  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!



Anonymous said...

Thanks for the tutorial! I'm more confused than ever! My problem, not yours. Your steps seem very clear, if I only knew what you are talking about. lol
Bloomfield Beads

Dionne said...

Hahaha, I am doing a post at Meylah in a few weeks on Blog Buttons - I guess Meylah and you must think alike.

Rustique Art said...

Really? if I have my photos on flickr, then I can use them anywhere else? oops...

thank for the tutorial though :)

Erin said...

Rustique - you can use flickr photos anywhere, but you have to link back to your flickr photo's page rather than somewhere else :) they have html code at the bottom of each picture, and that's what you're supposed to use, so that it links back to flickr correctly. you can't use it for photo hosting without linking back is all!

Colleen said...

I used this today.

Related Posts with Thumbnails