How to Create a Menu Bar for Blogger Layouts, Part 3 (Menu Buttons)

• Tweet
• Email
• Sharebar

• Tweet
• Email

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)

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. So I decided to do some posts on the various ways I’ve discovered to accomplish this goal. This may seem daunting at first, but if I can do it, anyone can!

After posting the first two articles about creating a menu bar in Blogger. I received an email from a fellow blogger, Kasie from The Art of Life. Kasie couldn’t use these tutorials because she was using Old Blogger, so she used a different method.

Kasie used Paint Shop Pro to make some buttons, then added them to her blog below the header.
I used this method on my new blog One Mom’s View, and I will attempt to post step-by-step instructions for buttons like you see in the screenshot.

Create your buttons using Photoshop or PaintShop (I use Photoshop)

1. Change the background color to the color you’d like to use for your buttons. Click the background square on the toolbar (shown with the arrow), and then select the color for your buttons.

2. Select FILE>NEW. Under image size, change the height and width to the desired dimensions. If you would like to make the menu stretch across your entire header, divide your header width by the number of buttons you want. My buttons for One Mom’s View are 155 pixels by 20 pixels. Under Contents, chose Background Color.
3. Add text. Chose the Horizontal Type Tool (the T on the toolbar) Click on your background and type what you want the button to say. Change color and font accordingly. If you need to move the text after you type it, you must change to the move tool in the top right of the toolbar. I do not know how to make a border on your button in Photoshop, I am certainly no Photoshop expert.

4. Save your button by selecting FILE>SAVE AS.

5. Upload your buttons to a photo hosting service such as photobucket.

NOW WE WILL ADD THE BUTTONS TO YOUR BLOG

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 Template 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 Page Element’ option between the Blog Title (header) and the blog post section. This is the place where you would select ‘Add Page Element’ 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

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

• On your Template/Layout, click the very top rectangle under navbar, where it says add a page element. 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.)

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

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

4. Choose HTML/Javascript. In the content box, add the HTML tag for your buttons from Photobucket. The code will look something like this:

<a href=”http://photobucket.com” target=”_blank”><img src=”http://i148.photobucket.com/albums/s14/juddsarah/HomeButtonRed.jpg” border=”0″ alt=”Photo Sharing and Video Hosting at Photobucket”></a>

Where it says <a href=”http://photobucket.com” target=”_blank”> change the url to the url of your post, corresponding to the button. Mine would then look like:

<a href=”http://onemomsview.blogspot.com” target=”_blank”><img border=”0″ alt=”Photo Sharing and Video Hosting at Photobucket” src=”http://i148.photobucket.com/albums/s14/juddsarah/HomeButtonRed.jpg”/></a>

5. After you add all your buttons, center them by adding <center> at the very beginning and </center> at the very end.

6. Save by selecting Save Changes. If you want the menu under your header, move (click and drag) the newly created Page Element underneath your header. Preview, then Save your template.

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)