Beautify Your Blog Part 2: Linked Menu

Here's part two of my beautify your blog series... I'm going to show you how I created a Linked Menu using Buttons that you can see on the right. This builds onto Part 1: Creating a Linked Button. And remember, my disclaimers from Part 1 still applies:

Huge Disclaimer: I am not the most computer savvy chic. I dropped a basic photo editing course in college after the first class because I was so overwhelmed. So needless to say, all this html and photo editing business scares the socks off me. I really don't know what I'm doing half the time. But I like to share how me, a computer handicapped person, pulled off a few blog design elements that worked for me and my blog.

2nd HUGE DISCLAIMER: (please read!) this is how I did it. I know there are plenty of better, easier, and faster ways to do this. I'm just sharing what worked for me. I make no guarantees :)

Ok, now that we have the disclaimers out of the way, here's how I created my sidebar Linked Menu that you know currently see on my left sidebar:

I used Picasa (free photo editing software from google) and Photobucket (free image hosting site). Accounts with these sites are free and easy to create. You could use other similar programs and sites as well.

First, pick an image from picasa that you'd like to use for the background. I picked this one of my Argyle Bracelet. I wanted a solid white background like you can see in the top left corner. (hehe, like I said, I'm not good with computers. I figure out how to manipulate a few programs to accomplish what I need to do. This is my work around to get a white background :)

 Now create a collage with just this image, enlarge the size if you need to. Then click create collage.

After you have created your collage, you'll want to crop the image down to only show the part that you want on your Menu Button. You'll want to use a Custom Aspect Ratio of 256x75 (I wanted mine wide and skinny) To do this, click on Crop, click the drop down arrow, select Custom Aspects Ratio and then enter 256x75 (or whatever ratio you want). I cropped mine down to be a solid white box like this:




Come on, can't you see it?! haha jk ok, so it's not there. But that's what it would look like :) Next you'll add text:

 

Resize the text to fit the image. This is what mine looks like. Button design done. Now export your image. When you click export, a box will pop up. In this box, you want to click the circle next to Resize and change the file size to 256 pixels (as long as you're doing a 256 wide button like I did, otherwise, change it to your selected size) Then click Export.

Now open your Photobucket account and upload this your image. Then click Save and Get Links.

Copy and paste the Direct Link code. You'll then plug it into this basic linked button code below:

 

replacing the second text in pink with the code you got from Photobucket. Next enter the link to the page/post that you want to link to that menu button to. I linked the above button to my advertising page.

(If you need more help on creating a simple linked button, check out Part 1.)

Then add a html gadget to your side bar and paste the code into it. 

Repeat these steps for each button. Be sure that you use the same font size and color so that your menu looks uniform. For each new button you create, copy and paste it into the same html gadget you created on your blog.

 

Sorry for the lack of pics. Hopefully I explained it well enough! If you have questions, let me know. I can't guarantee that I'll be able to help you. ;)
Good luck making your Menu!