Wednesday, April 6, 2011

Teach Me Wednesday: Making Buttons for your Blog

Last time we had a Teach Me Wednesday I showed you how to make a banner using Picasa.
Today I'm gonna stretch it a little farther and teach you how to make cute little navigation buttons for your blog.
If you've noticed, I've gotten rid of the little Etsy boxes on the side of my blog, and added buttons that take readers directly to my Shop, my Tutorials, and I even have a Home button which takes people directly to the front page of my blog in case they wind up stuck in a post. I've made the buttons to match my border. (Thanks Shabbyblogs!)
Okay, here's what you're going to do:

1. Take a screenshot of your blog. To do this, hit the little button in the upper right corner of your keyboard that says "PrtSc".

2. Now, hop on over to Microsoft Paint, hit the "Paste" button and your entire screenshot will pop up. Hit the "select" button and draw a square around the portion of your border that you want to make buttons out of. Now, hit "crop".
This is what I have after I've done all that.
Now, save this portion somewhere on your computer as a JPEG.

3. Jump over to Picasa and open your new little photo.

4. Now, here's where you'll make the photo button size.
Over on the left, click on "Crop" under "Basic Fixes".
In the drop down box, scroll all the way to the bottom until you reach "Add Custom Aspect Ratio".
Type in 75 x 125 (these are the perfect size for my blog, you may have to play around with it a little).
Now, be sure you've clicked on that Aspect Ratio before you start to crop, when you start to crop, it will give you a box that is 75 x 125 pixels.
Choose a section of your background to make the button.
Crop it and save.  

5. Now, to the left, go back to basic fixes and click on "Edit in Picasa".
You'll get this screen.
Now, here's where you can really play around to make your button look how you want it to.
Here, I've gone to Frames and Rounded the corners to give it a softer look.

6. Then, I added text in the colors and fonts that I wanted.
You can make your button say anything you want it to.

7. Whatever you end up with, click on the button in the top right that says "Save to Picasa".
It will take you back to Picasa where you'll save a copy of your button in a place where you can find it easily, like the desktop.

8. Now, go to the design portion of your blog and where it says "Add a Gadget", you're going to add a a picture.

9. Upload your picture from your desktop, and then fill in JUST the link bar with the link of where you want that button to take you.

10. Hit "Save" and go back to visit your blog. (You may want to come back and move your picture around in the column to get it where you want.) You can make as many or as few buttons as you want, but if you do it this way, you can make them match whatever you want them to.
You could even make buttons with backgrounds of your jewelry.

Also, if you'd like some cool backgrounds, you can search "textures". I know there are some free ones on Deviant Art. Basically, they are pictures that are just patterns or literally textures that you can use as backgrounds. The only thing is that you need to give credit to whoever created the texture.
I hope this helps!


  1. Great post! I might just have to give this a try. Not with a background (because I don't have one) but something else. Thanks!

  2. Thanks Marcie- I always enjoy these tutorials!