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 256×75 (I wanted mine wide and skinny) To do this, click on Crop, click the drop down arrow, select Custom Aspects Ratio and then enter 256×75 (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.
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!

post signature

Share and Enjoy

  • Facebook
  • Email
  • Twitter
  • Pinterest
  • StumbleUpon
  • Google Plus
Linda
Hi! I'm Linda, the craft addict behind Craftaholics Anonymous®, a craft blog. Crafting is cheaper than therapy, right? When I'm not DIYing something, I can be found taxiing around our 4 crazy kids or working out. Or shoe shopping... because you can never have too many shoes! Happy crafting! ♥
Linda
Linda

Latest posts by Linda (see all)

Join the Conversation

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comments

  1. 1
    Pat & Ron Harris

    Hi, I've been looking through your blog and you have some terrific ideas using zippers. How creative! Love it. Pat @ junkblossoms

  2. 2
    Pat & Ron Harris

    Hi, I've been looking through your blog and you have some terrific ideas using zippers. How creative! Love it. Pat @ junkblossoms

  3. 3
    Anonymous

    Hello, as you can see this is my first post here.
    Hope to receive any help from you if I will have any quesitons.
    Thanks and good luck everyone! ;)

  4. 4
    Clements Family

    I am so glad you share this! I am always asking you questions…so I am glad you are willing to share:)

  5. 5
    Hanneke Nelson

    Ummmm, your link menu is on the right… :-)

    Thanks for the information, it really is very helpful!

  6. 6
    Kim

    I tried to do this once, but tried fading the pic completely out and it didn't work. I will try this and believe I will get it to work this time. Plus, I just got into Picasa so can get a better font than what I could with photobucket. Thanks for sharing <3

  7. 7
    pk @ Room Remix

    Thanks for sharing all of the helpful information! I'm going to mark it and come back when I need it.

  8. 8
    a little bit of everything

    So glad I had chosen your blog to follow and saw this entry. I spent hours one night trying to do a button and manage to come up with a photo (Picasa) but the scroll box eluded me until I followed your instructions and your referral to Jenieshell. I believe I succeeded ! Hope you will check it out and become a follower ! Thanks again!

  9. 9
    The Yorgason's

    Ok, so I have two questions for you! How do you do your headers? I would love to feature some of my projects on my header, but I don't know how! Also how did you get your comments to have this different white page? I like that and would love to do this to my blog. If you would let me know that would be great! Thanks!

  10. 10
    sunflowerlin

    I am trying to create my custom signature, but getting stuck somehow. I use Picasa and found my image and creat it into a collage, but I cannot for the life of me find this crop tool you are talking about. I can use it to edit my photo, but I cannot find it in the collage feature…. any suggestions?

  11. 11
    smilemonsters

    This helped me get things straight in my brain! I knew how to create a button but never put it together to create links for my sidebar. Goofball, I know! Thanks and your disclaimer cracked me up.

    Jo
    http://smilemonsters.blogspot.com

  12. 12
    Monica

    Great tips! I hope you do one on your little custom facebook and twitter share buttons!!