How to Create a Site Menu Bar in Blogger Layouts, Part 2

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 using CSS)
• How to Create a Menu Bar for Blogger Layouts, Part 3 (image buttons)

With guest contributor Michelle From In the Life of a Child.

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. Michelle went on a quest to create menu buttons along the top of her blog. This post is written by Michelle, and will outline how to create these, like you see on her blog. (the screen shot below) The first article in the series, written by myself, outlines a way to get a simple link menu across the top of the page.



Sarah at Real Life has asked me to contribute to part of a "How To" post about adding a menu navigation bar with menu buttons to a blog. (I think her logic is that she knows that I'm a total newbie - so if I can do it, anyone can!) First of all, credit where credit is due:

I would never have figured this out without the help of Bizwhiz over at 'Tips For New Bloggers', Jordan at 'MommaBlogga' , and Sarah at 'Real Life' .

In looking back, Sarah's method for adding her menu bar would have been tons simpler than what I did. However, I never seem to do things the simple way. If you want rectangular buttons on a menu bar that look something like this, then read on! I don't know how to approach this, except to just walk you through my steps one by one. Just so you know, the template for my blog is the "Thisaway Blue" template. Are you ready? Here goes!

1. Manually change the HTML template of your blog to add more space for a Page Element.

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. 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. Decide what buttons you want in your menu bar, design the pages that the buttons will link to as "New Posts" and post them.

• If you want an 'About' page, design the page under 'New Posts' and post it. You can be creative here! You could have a button linking to a page with all of your favorite posts listed as links. (If you have no idea how to put links in your posts read this article at 'Tips For New Bloggers').

• You can literally do whatever you want here. When you publish the posts, your blog will assign a unique URL address to each post that you will then use to set up your menu buttons. You don't need to publish a post for a 'Home' menu button or for an 'Email' or 'Contact' menu button.

3. Read the article 'Horizontal Menu and Navigation Bar' at 'Tips For New Bloggers'

4. Add your 'Gadget' to your template for your menu bar.

• Click your layout tab and then click on page elements. Add an HTML/Java Script page gadget between your header (blog title) and your blog posts.
• Leave the title section blank and in the content box add the following code:

<div id="newnavbar"> <ul> <li><a href="URL of your Home page">Home</a></li> <li><a href=" URL of your About page">About</a></li> <li><a href="mailto: Your Email Address">Contact</a></li> </ul></div>

• In the blue section, add the unique URL of the post that corresponds to the button title.
• The black section will be the text that will appear on your menu buttons
  
• Alter/customize the above code to suit your individual needs
  

5. Add the CSS code for your new menu bar to your HTML template.

• This is where I first ran into trouble. At 'Tips for New Bloggers', Bizwhiz says to look for the section in your template's CSS code that says: /* Header */:- and insert your code underneath it. I did a 'control F' search of my template for /* Header */ and came up with nothing. After much trial and error, I found that the correct place to insert the new CSS code for the menu bar in the Thisaway Blue template is after this section of code:

/** Page structure tweaks for layout editor wireframe */

• If you want your buttons to look exactly like mine, here is the CSS code that you insert directly after the above piece of code in red:
  

#newnavbar ul li{
background: #e9ffd9;

}

#newnavbar ul li{
font-size:100%;
font-style:italic;
font-family:Times;
font-weight:bold;
list-style-type:none;
display:inline;
padding:10px;
margin:50px;
border:3px solid #CAF99B;

}

#newnavbar li a{
color:#7E587E;

}

#newnavbar li a:visited {
color: #7E587E;

}

#newnavbar li a:hover {
color: #B93B8F;
background: #CAF99B;

}

body#layout #main,
body#layout #sidebar {
padding: 0;

}
This is where Jordan at MommaBlogga became invaluable! I wanted to change the background color of my buttons and the background color of my template was an issue. She explained to me that the Thisaway Blue template doesn't use true background colors - it uses background images! (This after I had drove myself crazy for hours trying to figure out where I could change the background color). The code above has an added segment of code for a background color specifically for the menu buttons. This at least anchors them and prevents them from looking like they are just accidentally hovering there over your blog.

She also helped me tighten up my CSS code so that the new menu bar displayed properly and taught me that spaces and misplaced characters matter! Where my original code read:

#newnavbar li a:hover {
color: #B93B8F;
background: E0FFFF#;

She suggested adding a bracket in a key place, changing it to read:

#newnavbar li a:hover {
color: #B93B8F;
background: #E0FFFF;

}


The final problem that I ran into was that the border color of my menu buttons was defaulting to the color selected for the font color of my blog. I wanted to specify a separate color for my menu button borders while retaining my selected post font color. Again, Jordan at 'Mommablogga' came to my rescue with a simple solution! She simply had me alter my new CSS code to contain border definitions, like so:

border:3px solid #CAF99B;

Problem Solved!

• Now preview your blog and verify that it looks the way it should.
• Click 'save template'.

6. Now the fun part! Personalize and make it yours!

• You can change any of the above color codes to any color you choose. ' Tips for New Bloggers' has a handy dandy color reference chart at: (link to: http://tips-for-new-bloggers.blogspot.com/search/label/Color%20Chart )
• You can change the font size, weight, style or family
• Altering the padding size will change the size of your buttons
• Altering the margin values will change the spacing between your buttons
• You can remove the 'hover' code if that effect isn't your style - the possibilities are endlessl

7. If all of this seems WAY too complicated, then Sarah has a super simple way to add a simple and elegant menu bar without all this fuss. She also knows some great tricks for designing a custom header. (I really wish I had talked to her before I was up to my eye-balls in HTML code!)

8. Now go! Have fun, and design something that is uniquely you!

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