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

Posts on this topic:




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.

Photo Sharing and Video Hosting at Photobucket

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.

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. Jordan (MamaBlogga) says:

    Thanks, Sarah and Michelle, for this series and for your kind words.

    One note, though: spaces and returns in and of themselves don’t break or fix CSS. You can have valid CSS without spaces and returns (though some browsers can have a tough time with them, I suppose). However, having the octothorpe (#) after the hex code (E0FFFF) does break the CSS validation. (Again, some browsers will read it anyway, though. I mentioned that in the e-mail, too.)

    The correction that I made at point wasn’t adding an extra return to the code; the closing bracket (}) was missing in the original CSS. Adding that, not an extra return, was what made the code suddenly work.

    Thanks again for the mention!

    [Reply]

  2. Thanks Jordan! I just emailed Sarah about the corrections so that she can update the post. I really appreciate all your help.

    [Reply]

  3. SingForHim @ Real Life says:

    I added the updates. Sorry, and thanks for the clarification.

    [Reply]

  4. SingForHim @ Real Life says:

    Who knew that (#) was called an octothorpe? Anyone besides Jordan? Thanks, Jordan, now I have a new vocabulary word to annoy my husband!!

    [Reply]

  5. melody is slurping life says:

    Great series of posts. I’m new to Blogger and really appreciate this.

    [Reply]

  6. just want to drop you a note to thank you for the easy steps to incorporate a menu bar. I used the script to add menu bar onto my foodblog. It works wonderfully. Thanks!

    [Reply]

  7. OH MY GOSH!!!! YOU ROCK!! I really needed this upgrade to my site/blog Famous Orations of the World(http://keyspeeches.blogspot.com) and this post really made it possible! Thank you a ton!

    [Reply]

  8. Selamat tour ke batam says:

    Hello
    Could Any body teach me, how to split the post for each menu bar
    Like
    Menu Bar Home
    Menu Bar Affiliate (TAlking About Affiliate
    Menu Bar Tips & trick (Talking About Tips)
    Pls Help me

    [Reply]

  9. Anonymous says:

    Anyone ever heard of Richard Dawkins?

    [Reply]

  10. Oh, the mere mention of his name strikes fear in the hearts of Christians everywhere!

    [Reply]

  11. Cathryn Taylor says:

    Thanks so much for this info about the menu bar. I have one problem. How do I make each page have a different format. I have a 3 column blog for my home page, but I want a single column for my about page and other pages. I don’t want the content on the home page fixed on all pages. Is there a way to change this?

    [Reply]

  12. Cathryn, unfortunately, I don’t think there is a way to do this on Blogger. On WordPress, you can have a different template for the front page, posts, and pages.

    [Reply]

  13. Cathryn Taylor says:

    Thank you for the response Sarah. Is the wordpress blog where that is possible the free blog or the upgrade?

    [Reply]

  14. You would have to get the self-hosted version

    [Reply]

  15. Hi — I was thinking of using Blogspot and was playing with a template. I wanted an HTML box under my banner but did not know why I could not put one there.

    Your tutorial pointed out how to add it. Thanks so much, I appreciate this. I am still in the sandbox with this platform.

    [Reply]

  16. I did get a navigaton bar BUT… my buttons are overlapping AND they are not spaced correctly on my page…. and right, now, of course, they’re the wrong color.
    HELP???????
    http://shermanhouseofpraise.blogspot.com/

    [Reply]

  17. Hi, me again!!

    I need blogging for dummies type of help.

    If I want an article I’m writing to correspond with my ‘Youth’ category navigator button, how do I make them link?

    http://shermanhouseofpraise.blogspot.com

    Oh, btw, when I try to link to anyhing by tips for bloggers, it just takes me to a bogus page that has ‘awesome home page’ in the URL window.

    Thanks,
    Barb

    [Reply]

  18. greengirl says:

    Thank you so much! I’ve been wanting to add hyperlinks to my blogger site and was clueless about how to do it! Great description, I got mine up and running with very few issues – thank you again!

    [Reply]

  19. Irish Tribe says:

    Thank you so much. This has been a big help for a novice like me. I’ve successfully added the new menu bar to my blog http://irishtribe.blogspot.com/

    Much appreciated!

    [Reply]

  20. Nice tute

    [Reply]

  21. Sandra Miller says:

    Thanks a bunch! You saved me a lot of time!

    [Reply]

  22. So well explained! I’ve been banging my head on the computer screen trying to do this. Your directions are the clearest ones I’ve read yet. Thank you!

    [Reply]

  23. Do you know of a way to create links/pages for your menu bar that do not have to be “New Posts”?

    I tried backdating a post, but it still showed up in Google Reader after I published…

    [Reply]

  24. Thanks so much! I just have one probably…innanely stupid question. How do I get furture posts to post under the headings on my navigation bar? I followed the instructions and have a menu bar but when I hit a button it only shows the initial post I made to create it. Do I need to insert the URL for each new post under the HTML code for that button each time? That would be quite a long code after a while. I know I’m maybe missing something about links or something?!? I don’t know if I even make sense lol :)
    Angela

    [Reply]

  25. Angela, you would then link the menu items to a ‘category’ (or ‘label’)instead of an individual post. Right click on the category you want to link to, then copy and paste. It will look something like this:

    http://www.reallifeblog.net/search/label/Blogging

    [Reply]

  26. eh… which tempate can i use?! I'm using "Rounders" and there is'nt any

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

    that's the 3 code modification :S

    so, which template i must use or where can i find one that is already modified?!
    thank you

    [Reply]

  27. I can’t get my menu to be horizontal! It just stays vertical. What did I do wrong?? help please!! bayliss85@mac.com

    [Reply]

  28. Comprehensive Post but little confuging for new bloggers.This can be done in more simpler way.If face any problems implementing this hack i appreciate to visit my blog http://www.techieway.blogspot.com

    [Reply]

  29. Comprehensive Post but little confuging for new bloggers.This can be done in more simpler way.If face any problems implementing this hack i appreciate to visit my blog http://www.techieway.blogspot.com

    [Reply]

  30. Help of Math says:

    hi!!

    I cant find this code even if i sharch for it by clicking "ctrl and f".. Please help me

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

    this is my website

    http://www.chobotstips.tk

    [Reply]

  31. Bless yu, thankyu for such awesome tips!

    [Reply]

  32. csaszare says:

    Thanks, great post!
    You may take a look on my menubar at ubuntu-hu.blogspot.com

    [Reply]

  33. Get Real Girl says:

    Thank you, thank you. I can't believe I got this to work. You can see it at: http://thuecrue.blogspot.com

    I hope to add more to it later, but for now, this is great!

    [Reply]

  34. The Noisy Daisy says:

    Thank you ! That helped a lot !

    [Reply]

  35. It was extremely interesting for me to read the post. Thanks for it. I like such themes and everything connected to this matter. I would like to read more on that blog soon.

    [Reply]

  36. …please where can I buy a unicorn?

    [Reply]

Trackbacks

  1. [...] How to Create a Menu Bar for Blogger Layouts, Part 2 (link boxes) [...]

  2. [...] How to Create a Menu Bar for Blogger Layouts, Part 2 (link boxes using CSS) [...]

Speak Your Mind

*