{Blogging Tip #3 – How to Add a Menu Bar – Part TWO}

Now that you know how to add more page elements to your blog, I’m going to take you one step further. Here are instructions on how to actually add the menu bar graphics that I talked about in this tutorial.

Just to recap Part One, your layout tab should now look like this:
Right below your header (or above if you want) is where you are going to add your menu bar. The first thing you need to do is open up your photo editing software. I use Paint Shop Pro. Others use Photoshop. You can even download a free program called Paint.net. Now you are going to create your graphics. As you can see on my blog, I just used plain words in the fonts that I love. Your menu bar can contain links to anything you want. It can link to certain pages in your blog. It can link to your store if you have one. It can link to another blog. Pretty much anything that has a url, it can link to. **You are going to have to play around with the size of each button depending on how wide your blog is and how many menu buttons you want. I used 200px by 50px and it worked out fine for my blog.
Once you have all of your graphics created, you now need to upload them to a site like Photobucket so that it can generate the HTML code that you will need when adding a gadget. Once you do that you will see 4 codes below each of your graphics. The one you want to click on and COPY is the HTML code as pictured below.
Once you have copied that code, you are going to go into your layout tab in blogger and “Add a Gadget”. When this box comes up, you are going to select HTML/Java Script. *Note:You are not going to name your gadget. If you do, it will show up above your menu bar and it won’t look right. Leave the “Title” blank.
A box will come up and here is where you are going to add all of the HTML codes that you have copied from Photobucket (one at a time) to make your menu bar.
You will add the codes for all buttons in this one box. Once they are all added, you will put the following in front of the first (and only code): and then after the very last code you will put: . Doing this will center your menu bar to your blog.
Still with me?? We’re almost done! Feel free to save and take a look at your blog. If it’s to your liking, it’s time to move on to linking each button with the page of your choice.
Now that your menu bar is in place, you are going to go back in and EDIT. Notice where it says “Rich Text” in blue? Click on that.
Now you should be able to see all of your nice menu button graphics.
Click on each one and then click on the icon that looks like a little world with a chain on top (it’s right next to the “i”. A box will pop up and here is where you enter the url of the page you want that particular button to link to. Click OK. Once you are finished doing this to each link, click SAVE. You’re done!

Due to the amount of content that is used without permission and proper credit, I am no longer allowing a full RSS feed. I value each and every reader so I hope you will click through and come visit!

XOXO
Diana
www.thegirlcreative.com

Similar Posts

36 Comments

  1. Wow! Thank you! What a wonderful tutorial. Holly (above ^) at 504 Main sent me over. I’m so glad she did! I’m looking forward to reading more of your lovely blog. I have a crafty blog and would love to do a reciprocal blogroll listing. Cheers! Jenn

  2. Just finished making my first tool bar! The images are a bit wonky from my not typing them in the same spot on the graphic, but you really did make it easy to follow everything – thank you!

  3. Thank you!!! I found you through Sneaky Momma. I made the graphics I wanted on Picasa and resized them in Photobucket, and got the code, then added them, hooray!
    Now I just have to link them to something, Ha!

  4. ok so i have my buttons and added them…. but how do i get the horizontal across the top like you have? Also, I don’t have separate pages yet for like contact info, prices, etc. How do I make those so I can like my buttons to those? If you go to my blog, you’ll see that I just have everything on the side (lookhartphotography.blogspot.com)
    Like I said, I’m so new to this and would like to make my blog more professional looking and easier to use….
    Also, if I wanted to add categories (like wedding etc…) and want all the wedding pictures to show up, how do I do that? Do I have to add a tag at the end of each of my posts? Or should I just add a search button from google on my blog and then tag all the posts? thanks for your help!!!!

  5. ok i got mine finished finally today!!!! thank you so much for these tutorials!

    one more question though…. how do you change your labels on the posts? i’m trying to label all mine and they keep coming up with a whole bunch and i don’t know where to change it! thanks!

  6. Thanks you so much for this tutorial! It was so easy to follow and after about 20 minutes my menu bar is up and running! I have the same question as the comment right above me. How do you make the link come up in the current window instead of opening a new one?
    Thanks again!
    kellibwilson@gmail.com

  7. I love this and mine is up and running, but now my problem is that I can’t link more than one post to each button. Like, I have a “recipes” button, but I can’t get it to link to all of my recipes, just the one post. Thank you so much for this tutorial. Seriously, I have loaded this page probably 15 times this week.

  8. To answer Josh.Meagan.Abigail’s and Kelli’s question, you need to make sure that within your code the target says _self for same window. If you want it to open in a new window you’d use _new. Hope that helps! ๐Ÿ™‚

    Restorative Living – what you need to do is give your recipes all the same label. For example, give them all the label “receipes”. Then when you are at your own blog, click on the label “recipes”. This should bring up all of your posts using that label. Copy the url from your browser and use that to link your button up to. From there on out, when someone clicks on your recipes button, all of your posts that use the label “recipes” will come up. Hope that makes sense. Let me know how it goes. ๐Ÿ™‚

  9. Thanks so much for these great tutorials! I had a question about how I made my menu bar, so I am linking back to these two posts!

  10. Hi there, thanks so much for this tutorial. I did it!!

    I do have a question, How do I make the menue bar align to the left rather than center.

    I tried using and but it didn’t work.. can you please help with this.

    thanks!

  11. Thanks so much for posting this! I’m totally broke and trying to make my blog look more professional all on my own. I do have one question, though, someone already asked it, but I didn’t see an answer. How do you make the menu buttons go horozontal rather than verticle?
    Thanks!

  12. I simply can NOT even begin to THANK YOU!!! enough for this tutorial. I’ve wondered about this FOREVER and now I have answers thanks solely to YOU!! And the instructions were so easy too. And the other thing I’m truly grateful for is the info on the links opening in the same window… BRILLIANT!! I’m especially grateful to find you at this particular time due to the fact that I’m working on my dear friends blog for her book series (she’s an author)and I was able to use some of the graphics in her book for the menu buttons. She LOVES it and I love YOU for helping give this to her!!! Check it out! Thanks again! http://www.secretsofeverstar.blogspot.com
    Happy blogging!! :o)

  13. After searching for hours for a tutorial that actually makes sense, I am happy to have found yours!
    I have a quick question.
    Would it be possible to use one image for the menu bar and then link to the pages from there?
    Or is it better to use individual images?

    Thank you so much!

  14. This was SO helpful!!! I was taking another route to do this…and spent 2 days working with the HTML and it wasn’t turning out right! This is much easier and exactly what I was looking for! I am going to share this on my blog hopefully sometime this week ๐Ÿ™‚

    Thanks so so much!!!

    http://www.thestewartestate.blogspot.com

  15. Like so many others, I thank you for this tutorial. I’ve got my horizontal menu made (yay!!) but I do have a question…when you say “enter the url of the page you want that particular button to link to.”..do you mean a post that you have already made or are you talking about static pages? Right now, they just linking back to my photobucket page :/

  16. Thanks for this post!! I was having trouble with this making it more complicated than it need to be. Your instructions are easy to understand and I can’t wait to try this out.

    Thank you, thank you, Patricia.

  17. Thank you thank you thank youuuuu! I have been wanting to change my blog design for a while now, and I finally got the courage to when I found your post ๐Ÿ™‚

  18. Unfortunatly, my links are doing the same as Kristin’s. I keep seeing the error

    “An error has occured in this dialog. Error: 100. Function expected.”

    I hope to have some input on how to fix

Leave a Reply to Andrea Fogleman Cancel reply

Your email address will not be published.