Button, Button, Who's Got the Button? I DO!

I have wanted to create a button for my blog for awhile now but had no idea how to start.  I found a tutorial from Carrie at Oikology 101 that worked for me!  

I couldn't get the button to work through a Picasa upload (operator error, I'm sure), but I did get it to work through Photobucket.  Any student knows that repetition reinforces a concept, so here is my understanding of Carrie's process with a few embellishments of other things I have learned along the way. 

Create your blog button picture   - Carrie suggests that it be 150 pixels wide by 150-200 pixels high.  But how, may you ask, do I change the size of a picture?  I downloaded a program called IrfanView that allows you to resize a picture.  Once you download this program, click the icon on your desktop to open it.  Then choose File Open and find the .jpg or other photo file you want to resize on your computer.  My photos are generally in the My Pictures folder on my computer, but that may be different for you.  Make sure that you have added any desired text (ex: your blog name) to your photo (using Picasa or Picnik) before you load it into IrfanView


Once your photo is displayed, select Image, then Resize/Resample from the menu bar at the top.
If you want to preserve the aspect ratio (keeping the proportion of height to width the same as the original photo), make sure that option is checked BEFORE you change the width to 150 pixels.

Original photo size was 361 pixels by 311 pixels

Once I chose a Width of 150 pixels, the Height was auto-calculated to preserve the aspect ratio:

Make sure you File Save the button-sized photo and make note of where it's being saved.

Host your picture - This is the part that I had difficulty with in Picasa, so I'll give you my tips using Photobucket.   First, sign up for a login ID and password if you don't have one already.  Now create an album by clicking on that option.  Next, upload the photo button you just created and saved using IrfanView.  There is a green Upload Now button in the top center of the Photobucket screen.  (Due to size constraints, I couldn't include screen prints of all of these steps.)

A screen will be displayed which asks you to choose where you want to upload from (computer, phone, etc.).  Then click the green Select Photos and Videos button.


Select the photo you just created in IrfanView.  When it says Upload Complete, it's done.  Click on "Save and continue to my album."


Now hover over the photo you just uploaded, and Direct Link information will be revealed.

You want to copy and paste this into the code on Item #3 Create HTML for your button that Carrie shows on her tutorial.  You're replacing the part that says "your imagedirectlinkURL".  The remainder of Carrie's tutorial is self-explanatory, and works marvelously.

If this old-ish dog can learn new tricks, so can you!  Thanks, Carrie, for sharing your knowledge!