How to Make a Blog Button Grab Box

When I first made a button for my blog it took me FOREVER to figure out how to do the html code to get a snazzy little grab box underneath it.  Hours of googling, tweaking, googling, tweaking, googling and tweaking.  So I'd like to share what I learned with you so you can hopefully keep your googling and tweaking to a minimum...

First off you're going to need a button.  This is a fancy name for a jpg.  You can use a photo or text or a photo and text, or some graphics, or really, anything.  It's common to make it about 125 or 150 pixels square.  You can do this when you design it (I use elements, but you can use any editing program you like), or I'll show you how to resize it later if you need to.  OK, so here's my button:

Next up you need a photobucket account.  Don't have one?  Go get one.  I'll wait.

Ok, so upload your button to your photobucket account, then click on edit, resize.  (If you need to resize).

Here you want to click on "keep proportions" and then input your new size (I put 150 x 150).

Click "apply", then click "replace original" (down at the bottom).

You can do lots of other editing here in photobucket if you like.

I went to edit, decorate, borders, and added a border.

Remember to click on apply, then replace original.

When you are happy with how your button looks you need to copy the "direct link" code.  You're going to need this in a minute.

Here is the magic html you need to post into your blogger sidebar:

<div align="center"> <a href="http://andthenshesnapped.blogspot.com" target="_blank"><img alt="and then, she {snapped}" src="http://i77.photobucket.com/albums/j52/drexgal/buttonbutton.jpg" /></a> </div> <div align="center"> <form><textarea rows="4" cols="14"><center><a href="http://andthenshesnapped.blogspot.com" target="_blank"><img alt="and then, she {snapped}" src="http://i77.photobucket.com/albums/j52/drexgal/buttonbutton.jpg" /></a></center></textarea></form> </div>

Change the red to the link to your blog.

Change the green to that direct link you copied from photobucket.

Change the purple to the text that you want to show when somebody hovers over your button.

Then you need to post that code into an html gadget on your sidebar.  And here's what it will look like!

<center><a href="http://andthenshesnapped.blogspot.com" target="_blank"><img alt="and then, she {snapped}" src="http://i77.photobucket.com/albums/j52/drexgal/buttonbutton.jpg" /></a></center>

Have fun making buttons!

xxoo
Rachel
http://andthenshesnapped.blogspot.com/