How to Create a Menu Bar for Blogger Layouts, Part 1

Posts on this topic:



I’ve been noticing a lot of new bloggers are asking the same question: How do you create a top menu bar on Blogger/Blogspot? I asked this question on my blog, and no one could tell me. Also, the question has gone unanswered on the Blogger Help Group a few times. I discovered a very simple way on my own. This post will explain how to get a link bar such as you see on my site. (the screen shot below) Part 2 includes another article by my blogging friend Michelle from In the Life of a Child, which outlines a way to get colored link boxes across the top of the page.

Photo Sharing and Video Hosting at Photobucket

There are sites where experienced bloggers can help you with this task, and we will be linking to them. However, my idea behind this series is for two bloggers who are inexperienced with HTML and CSS to go step-by-step through what we did. If you have anything to add to our instructions or questions, please comment, as I am by no means the authority on blog design.

On to method 1: The easiest way, but also the simplest looking. If you want frills, this method may not be for you.

From your Blogger dashboard, click “Layout”.
You should be looking at the “Add and Arrange Page Elements” page. Do you have a rectangle under the “Navbar” that says “add a Gadget”? If not, the first thing you will need to do is to manually change the HTML template of your blog to increase the options of places you have to add page elements. If you have page elements at the top, skip to step 2.

1. Manually change the HTML template of your blog to add more space for a Page Element. (this step written by Michelle)

The best instructions I have found for this are at Tips for New Bloggers’ in Bizwhiz’s post entitled ‘ Add Page Element to Blogger Header and Blog’

His article has excellent step by step instructions and color illustrations that I couldn’t possibly improve on, so I’ll just hit the highlights:

To increase your options for adding page elements to your template:

  • Click on your Layout tab and then click Edit HTML
  • ALWAYS, ALWAYS, ALWAYS save and download a copy of your full template BEFORE making any changes
  • Hit ‘Ctrl F’ to search your HTML template and type in showaddelement to locate the proper place in your HTML code to make changes
  • Look for a place in the code that says:

    <div id=’header-wrapper’> <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’ no’>

  • Change the maxwidgets to 3 and the showaddelement to yes – You will now have two extra places where you can add page elements.
  • Scroll down a little further and find the place in the code reading:

    <div id=’main-wrapper’><b:section clas=’main’ id=’main’ showaddelement=’ no’>

  • Change the showaddelement to yes. You should now see options in your template to add page elements before and after your Blog Title. The process is different for the Dots template. I would suggest reading Bizwhiz’s article in entirety.
  • One final place to change the code: Scroll down to where you see the code reading:

    <div id=’content-wrapper’> <div id=’crosscol-wrapper’ style=’text-align:center’> <b:section class=’crosscol’ id=’crosscol’ showaddelement=’ no’/></div>

  • Change showaddelement to yes
  • You should now have an ‘Add a Gadget’ option between the Blog Title (header) and the blog post section. This is the place where you would select ‘Add a Gadget’ to add a horizontal navigation or menu bar.
  • Once these changes have been made, click ‘preview’ to make sure that the changes are appearing correctly. Once you have verified that the changes appear correct, click ‘save template’. You are now ready for the next step!

2. Write a new post for each page you want to link on your menu bar. The most common are Home, About, Favorites, Contact, but you could do anything. The links you use will be the URL for each specific post.

  • For Home, it will be your blog URL.
  • For Contact, it will be mailto:youraddress@email.com
  • For an individual post, right click the post title, and “copy link location”
  • For a label category, right click the label name, and “copy link location”

3a. If you want your menu to have your header’s background color:

  • On your Template/Layout>Page Elements, click the very top rectangle under navbar, where it says add a gadget. Anything you put in this top box will have your header background color from your title header. (If you have a custom header, the background for this box will still be the original header background color.) Be sure to change the text to a color that will show up on the background. I’m only saying this because I couldn’t figure out why mine wouldn’t work, till I realized it was black words on brown background!

3b. If you want your menu to have your posts’ background color:

  • On your Template/Layout>Page Elements, click the rectangle under your Header, which says Add a Gadget

4. Choose “HTML”

  • Create hyper-text links to the pages you want, using this code: (change the red text for your blog)

<a href=http://yourblog.blogspot.com>HOME</a><a href=http://your aboutpageURL>ABOUT</a><a href=http://yourfavoritepostsURL>FAVORITES</a><a href=mailto:youraddress@email.com>CONTACT</a>
Or any others you want.

I separated them with a vertical line, which is located below the backspace on your keyboard.

  • Then move (click and drag) the new page element just under your header.
  • Preview to see if you want to change anything.
  • Click Save.

Viola! You should have a menu bar just like I have on my blog. If not, review the steps one more time, then let me know in the comments or email.

Was this article helpful? Share your finished product! Post a link in the comments to your site with your menu bar.

Photo Sharing and Video Hosting at PhotobucketAdd to Technorati Favorites

About Sarah Pinnix

I'm a mom, blogger, vlogger, libertarian. I love Jesus, and my husband, too. Social Media Strategist for a Non-Profit (All statements here are solely my own)

Comments

  1. Thanks for this information. I still want to improve the link tab. God Bless!

    [Reply]

  2. Thank you!! Tiffany at Lattes & Life sent me to your wonderful post and it was very simple to understand and do! You can see my new menu bar on my blog if you pop over for a visit!! I'm sure I'll add more to the menu as I have time. Thank you again.

    [Reply]

  3. Thanks but one thing is im confused on how to increase the text size for the menu bar text links?

    [Reply]

  4. Very helpful post. Thank you!

    [Reply]

  5. ASHWIN PATEL says:

    thanks dude great job

    [Reply]

  6. okay…did it all exactly like you said…BUT now the html/javascript won't save when I enter it in as add an element! what the heck? please help!

    [Reply]

  7. guitargirl says:

    Thank you so much for posting this. I found your blog via google and was so relieved to find that I can have a tabbed layout while keeping my current wallpaper. You rock! :)

    [Reply]

  8. I have the tabs set how I want them on my blog, but don't have enough to fill my whole bar. I'd like to center the titles but can't find the info anywhere. Any tips?

    Thanks in advance ;)

    [Reply]

  9. { Mom of 3 Dolls } says:

    Thank you for your help! I had read your post a few times before trying to attempt it :) I've got my tabs to appear as I want them. The links to the tabs aren't appearing correctly except for the home and contact. The others have more than one post that I want to connect them to…My blog is http://momof3dolls.blogspot.com. Thank in advance and hope you can help!

    [Reply]

  10. { Mom of 3 Dolls } says:

    Never mind :P I finally figure out that I needed to make a new post linking all the old post together. THANK YOU SOOO MUCH :D

    [Reply]

  11. THIS WAS HELPFUL, THANKS!! :)

    [Reply]

  12. Jami @ livelaughlove5 says:

    Thank you thank you thank you!! I have been wanting to do this for so long and your instructions were perfect! I'm so excited!

    [Reply]

  13. Thank you so much for this post! You made it easier than eating pie..

    [Reply]

  14. Thank you so much!!! Wow, it was that simple yet I'd never have thought of it!!!

    [Reply]

  15. The Deitz Duo says:

    YES! THANK YOU! I can't tell you how many other pages didn't help the way you did! Thank you SO much!

    [Reply]

  16. Saranga Rathnayake says:

    You can make your own one very easily,
    Add Menu Bar To Blogger Blog

    [Reply]

  17. You're a lifesaver! Took me maybe a half hour. Glad you are at the top of the Goodsearch for "create navigation bar for blogger". My site is here

    [Reply]

  18. Am so excited to see this tutorial i came here through google. But there’s one problem with mine. I want my homepage to display only 1 post but it is displaying all the post. Please help me my email otodeluxe@gmail.com. Grateful

    [Reply]

  19. wow, this is just cool! :D
    thanks much!

    [Reply]

  20. You have no idea how long I have searched for a tutorial that spoke my brain’s language. It was perfect, exact and gave me precisely what I envisioned. Thank you. Thank you. Thank you.

    [Reply]

  21. Hi there! I seem to be too stupid for this as everybody else seems to understand… I don’t understand the steps 2 to 4… Do I just create ‘normal Posts’ on my blog? and how and where in the html-text do i create hyper text links? oh gosch-plse help me. 2 hours of lifetime wasted and feeling totally stupid.
    Thank u so much
    lisa

    [Reply]

  22. Best you could make changes to the page subject How to create Blogger Blogspot horizontal navigation bar tutorial | Real Life | An NC Mom Blog to something more catching for your subject you create. I enjoyed the blog post withal.

    [Reply]

  23. thanks its content helps me a lot.

    [Reply]

  24. specialsedu says:

    thanx for this helpful information.

    [Reply]

  25. Thanks, this post was really helpful.

    I created tabs in my blog, you can see it at http://diamondthrone.blogspot.com

    But I have a question as well,

    how do I add multiple blog posts to the newly created tabs?

    [Reply]

  26. Thanks so much for posting this information. The one part of this that I don’t get…. If I write a “About” post and a “Features” post and so on….I don’t want to publish them because they will show up on the blogs. How do I create a post and get a url for it without publishing it. I tried to just use the url that is present while the post is saved in edits. It doesn’t work. What do people do?

    [Reply]

  27. I’m super confused… I’m trying to get mine to appear so all my ‘baking’ posts appear under one header, then ‘fashion’ under another and I can’t work out how to do it!

    [Reply]

Trackbacks

    Speak Your Mind

    *