How to Create Buttons For Your Blog

I've had a couple people comment on the big buttons I have on the right side of the blog now. First, thank you for the compliments, I worked hard on them :) I'm not a graphic designer or even otherwise artistically inclined or trained, so it took me some time to design them.

There are LOTS of ways to make buttons for your blog. You can design the entire thing in PowerPoint or Paint or any other program that lets you create a picture. This is just how I did it. I think the best buttons and icons are created when people decide what they like and brainstorm their own ways to to do it, but I understand it's hard when you don't have a jumping off point. This post is just meant to be a jumping off point for your own ideas - not a be-all, end-all of blog button making. Remember, buttons are just pictures. Once you have the picture you want, you can hyperlink it to anything. It looks fancy once it's on a blog, but the nitty gritty of it is that it's just a linked photo, and really anyone can make one of those.

My lack of creative and artistic vision aside, buttons are super easy to make. First things, first: You need a white box. That's it. A box that's white and is a .JPG or .PNG file. You can do this easily in paint or PowerPoint.




Save your white box as a .jpg or .png file and upload it to Picasa. You can use the online Picasa (which is what I did) or you can use the downloaded version. Clover Lane has a fantastic tutorial about how to make a blog banner in Picasa (the downloaded version), but you can actually use it to create just about any blog button you want.

One thing you can't do in the online version of Picasa, is add a photo of your own (like of your dog or kid or house) after you've uploaded your white box. If you want to do that it's probably easier to use the downloaded version that's illustrated in the Clover Lane tutorial above.

Once you have your plain white box in Picasa you can edit it in Picnik.




In Picnik, you want to click the "Create" tab at the top.

You can add frames, text, pre-loaded doodles, or whatever else you want to your white box. Anything goes, it is your button after all. Go nuts.





At this point it's up to you to make things how you want them to look. The artistic stuff is the hardest part in my opinion. I fooled around with a lot of different "looks" before I got things how I liked them. There's no secret sauce to this one - it's all trial and error.

Once you've turned your plain white box into a masterpiece, save it (I suggest saving it as a new picture so you'll still have your plain white box if you want to do another one from scratch).




Once it's in Picasa again all you need is the link to the picture. If you use Mozilla/Firefox/Chrome, it's as easy as right click and hitting "copy link location." If you're using Internet Explorer, you'll have to click "properties" and then copy the Address URL.




Back in blogger you'll just need to add a HTML/Javascript Gadget, where you can insert your new picture.




Note: Your width may be different based on the size you have to play with. Most wide sidebars are about 300 wide (like my big buttons) and narrower ones are about 150 (like where my blogroll is).

And that's it! Once you insert the code your button will show up on your blog for everyone to see and click on.