Bloggy Basics - Design Your Own Button in 5 Simple Steps

QUICK UPDATE: I am no longer publishing to this blog, however, the Bloggy Basics series can be found at my other blog, Rediscovering Domesticity!

Have you seen the little square "buttons" for your favorite blogs?  Have you wondered how to get one yourself?  I'm here to help!

You can contact bloggers who do blog design to create a button for you.  It's not all that expensive - anywhere from $5 - $20 for a button.

You also can just create your own.

I made the buttons and headers for PennyPinchingPenguin and RediscoveringDomesticity.  I made the button for Bloggy Basics.  It's pretty easy!

Here's how.

1. Choose Your Image.  Your button is one part of "branding" for your blog.  If you hope to grow your blog into a business, branding is important.  You want something memorable.  Something recognizable.  I chose part of a free stock photograph/graphic from stockxchange.com for this blog.  I chose a photograph of my own for my other blog.  You probably will not be able to use the entire image.  Most buttons are scaled to 125 x 125 pixels.
2. Edit Your Image.  You can use a variety of programs to edit your picture.  I used Photobucket for all of my images.  I just started using Picasa and Picnik to edit photos.  Remember to resize your images to the desired size (I recommend 125 x 125).  Add effects.  Add text.  Be creative.  You will want to save images as new files since most likely you will need to make changes.  Unlike documents, once you add text and alter photos, it is very difficult and sometimes impossible to revert to the original image.  I had to re-do all of mine a few times to get them right.  Take your time.  Play around.  Be creative.  Have fun.
3. Add to Image Hosting.  I love hosting my images through Photobucket.  Once the photo is uploaded, double check the image.  Edit as needed.  Save.  In Photobucket, each image is given several options for sharing.  If you just want to use the image and not create a button with a link, you can simply use the html code.  You will need the direct link to create the linkable button.
4. Write Your Code. You will need to enter some information into the code skeleton below.  The sections in red will need to changed to your information.
5. Add to your blog.  Final step!  If you are using Blogger, go to your Design or Layout tab.  Click to Add a Gadget.  Choose the HTML gadget.  Type the title you would like, if you would like one.  Copy the completed code (see instructions below) into the gadget box.  Click to Save.  On the Design page, drag the gadget you just created to where you would like it on the page.  Save.  Check out your blog!

This is what the Photobucket sharing options look like:

 Code Skeleton:

<a href="Put Your Blog Address Between These Quotes" target="_blank"><img alt="Put Mouse-over Text Between These Quotes" src="Put Your Image Direct Link Between These Quotes" /></a>
The mouse-over feature will show text when someone has their mouse hover over your button.

Here is what my button code looks like:
<a href="http://pennypinchingpenguin.blogspot.com/" target="_blank"><img alt="Penny Pinching Penguin" src="http://i971.photobucket.com/albums/ae200/penguinelk/1035403_27541235-3.jpg" /></a>

Would you like a "Grab My Button" gadget?  It's quite simple now that you have your image!  Just change the parts in red with your information and add as an html gadget in your blogger design.

Grab My Button Code Skeleton:
<div align="center"> <a href="Put Your Blog Address Between These Quotes" target="_blank"><img alt="Put Your Mouse-Over Text Between These Quotes" src="Put Your Image Direct Link Between These Quotes" /></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><a href="Put Your Blog Address Between These Quotes" target="_blank"><img alt="Put Your Mouse-Over Text Between These Quotes" src="Put Your Image Direct Link Between These Quotes" /></a></textarea></form> </div>

Here is what my completed code looks like for comparison:

<div align="center"> <a href="http://pennypinchingpenguin.blogspot.com/" target="_blank"><img alt="Penny Pinching Penguin" src="http://i971.photobucket.com/albums/ae200/penguinelk/1035403_27541235-3.jpg" /></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><a href="http://pennypinchingpenguin.blogspot.com/" target="_blank"><img alt="Penny Pinching Penguin" src="http://i971.photobucket.com/albums/ae200/penguinelk/1035403_27541235-3.jpg" /></a></textarea></form> </div>

Simple!  Let me know how it goes - I'll come check it out!