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

Posts on this topic:

• How to Create a Menu Bar for Blogger Layouts, Part 1 (simple text links)
• How to Create a Menu Bar for Blogger Layouts, Part 2 (link boxes)
• How to Create a Menu Bar for Blogger Layouts, Part 3 (menu buttons)

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.



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. (Do Follow)