Monday, July 16, 2007

Menu bar for blog Header

A blog reader asked for a menu bar, pointing to a website that gave instruction on how to do it. Unfortunately, the instruction wasn't clear and I have to experiment a bit on my own. You can see the result at New Zealand Guide. This blog uses the Hackosphere 3 column New Blogger template. If you are not bothered about that "menu bar" below blog title problem or you don't face similar problem with the template you chosed, skip the update in red and go to the rest of the post. But if you have some interest in getting a color that matches your site, a pretty comprehensive explanation about the proceedure is described

Update 16 July 2007: I first started experimenting with a test blog, and successfully put the menu bar above the Blog title. I then changed the URL and made it the New Zealand Guide. I vaguely remember converting the standard 2 column Blogger Minima template to Hackosphere 3 column New Blogger template and proceeded to customize the blog plus put the menu bar back. However, I do multi-tasking, and simultaneosly have a few browsers and tabs opened, participating in forum, responding to comments and emails (and reading them), preparing or editing posts, etc. Maybe my memory wasn't that good, because today when I check the blog, I found it to be only a 2 column template, plus the menu was below the blog title. I tried to change to the above 3 column template to redo things all over again, but failed to upload the template. Got the error code bX-dgyx2j.

I then decided to stick to the 2 column template, but tried to drag the menu bar above the blog title, but failed. I then realized the "Add a Page Element" widget in the Header section of the LAYOUT was missing and went to the template editor to check. I found the code

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

which should be

<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>

so proceeded to change it, but when I tried to save the template, got the error message:

We were unable to save your template
More than one widget was found with id: HTML1. Widget IDs should be unique.

Messing with the New Blogger template is very much less forgiving than the old classic Blogger template, and the tiniest thing can make you unable to save a New Blogger template. I have a lot of other things to do, so decided to leave things as it is for the moment and come back to this again later. I should be able to do it as you can see the menu bar of Guide to Caribbean is above the blog title. It will only be a matter of getting the spare time to redo it.

First, you will have to add an additional "Add a Page Element" widget to the Header section of the LAYOUT. Instruction on how to do this is described at Add graphic, AdSense ads or link units, searchbox, etc. to blog Header. Once you have that, click on "Add a Page Element", then chose HTML/Javascript and in the box, type the HTML for a table which may be a single row or multiple-row table, with hyperlink HTML for the data. For example, for a single row menu, The HTML may take the form

<table><td><tr><a href="URL 1">description 1</a></td><td><a href="URL 2">description 2</a></td><td><a href="URL 3">Description 3</a></td></tr><table>

How many <td> and </td> tag pairs you have depend on how many sections you want. Also if you want a border, you will have to add the border="1" attribute, and if you want background color, you will have to surround the table HTML with <span style="color:red;"> and </span> tags. The color red may be replaced with the hexadeximal HTML code for color for a greater choice of colors. A great tool I frequently use when dealing with colors is ColorPic sometimes also called color picker. Someone said inbound links to your blog will help to increase its PageRank while outbound links will to some extend decrease its PageRank. So instead giving you the active link to click on, just type or copy-past "colorpic" into the search box above, tick the "Web" radio button, and I am pretty confident the site you need will be the first result in the SERP (search engine result page). With ColorPic, to get the color code of a particular section of your site, all you need to do is to hover your mouse over that section and you will see the color code in ColorPic.

Another aid I use "Color Blender" which a a website and there is nothing to download. Just type or copy-paste "Color Blender" into the search box above, tick the "Web" radio button, search and you will probably find the site I use in the second result of the SERP (search engine result page). You can chose between 1 to 10 midpoints (colors that can blend with 2 particular color on your site), depending on how fussy you are. If you don't want to be put into a position of having to make a choice, just leave "Midpoints" as the default 1. For illustration, I chose 4 midpoints, and the color and color codes in the screenshot below gave 4 possible colors that can blend with the 2 colors you chose from your site with ColorPic:

Color Blender

Coming back to the table HTML code to display the clickable "menu bar", to make the explanation clearer, I will put the codes I used to display the menu bar in the blog New Zealand Guide in a scroll box below:

<span style="background-color:#C0C0C0;"><table border="1"><tr><td><a href="">Earn with TextLinkAds</a></td><td><a href="">Earn with Google AdSense</a></td><td><a href="">Earn with AmaSenseAds</a></td><td><a href="">Earn with AuctionAds</a></td></tr></table></span>

The menu bar is at the top. If you want it elsewhere, for example, at the bottom of the Header, just drag the Page Element down to where you want it.

You may be able to do the same thing with other templates. I tried it with Denim template, but font (and the "menu bar" was deep and the link color was blue which blend into the blue header color and is practically invisible, and I could not find a way to change the link color. I did managed to change the font size though to make the menu bar the size I wanted. If I change the background color of the table to be very different from blue, I may get it to work, but the blog then may not appear nice. Anyway, I will do more experimenting if I ever get the spare time and update this if I get any positive result.

Update: Managed to get the font size of the table for the Denim template reduced, but was used a color which is the same as the headings in the sidebar, but it doesn't blend with the blue Header. Anyway, by doing this, at least the links are visible. You can see the demonstration blog at Guide to Caribbean. I paste the HTML used in the scroll box below:

<div style="background-color:#FFD595; font-size:50%;"><table border="1"><tr><td><a href="">Earn with TextLinkAds</a></td><td><a href="">Earn with Google AdSense</a></td><td><a href="">Earn with AmaSenseAds</a></td><td><a href="">Earn with AuctionAds</a></td></tr></table></div>

Maybe one day I will change the background color to white and it may look nicer.


  1. This was helpful. If possible, how do I attach multiple labels to these tabs?

  2. Hi Charles,

    Sorry, don't understand.

    Peter (Blog*Star 2006 and 2007)
    Blogger for Dummies

  3. Anonymous7/27/2007

    Now you can even add flash as your header.

    How to get Flash Header

  4. Anonymous2/15/2008

    Hey, That was great... i was looking for quite some times now for that kind of thing. But i've got a question.I Hope that you help me sort it out.

    Cant We place images of "Home" "About Us" "Contact Us" In The Header and link it??
    I mean just as other sites have these buttons, atleast we can try with the Image of that button

    I've got a blog, if you get time please have a look, and sujjest
    Thanks in advance.

    By the way what do you say about those URL redirections that services like provides?

  5. Hi Anoop,

    Regarding hyperlink images (clickable) like [home] [about us], it is possible, but it will take a whole post to explain it. If you are really interested, you will have to chase me to make a post about it.

    I am afraid I cannot comment about
    as I don't know anything about it, have no interest and no time.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

  6. this link might help Menu bar for blogger

    I manage to get it there on how to do it. Check my blog menu my blog

  7. hi! this is helpful. thanks. it worked for me. i even put a background image on it and a searchbar on the last cell aligning on the right side. but my problem is, the whole menubar looks ok in Firefox but not in IE. please check my blog. i hope you can help.

  8. How do I float the menu tabs in the center under my header?

  9. Try surrounding with tags <div style="text-align:center;"> and </div>


  11. Peter,

    Do you know how to integrate a search box into a menu/nav bar? I have searched all over and can find nothing on this topic. I have seen it on many sites. Here is and example :

    I am trying to make my blog look more polished. I am using Amanda from Blogger Buster's Super Custom Template.

  12. That is a pretty neat horizontal menu bar with a search box. I am afraid I do not know how they did it. Perhaps if you have the time and the inclination, you can examine its page source code to see if you can find the answer.

  13. Instead CSS you can use the html codes which can easily done using the addgadget of "Html/Javascripts". For simple info see here Improve your blog naviation

  14. useful tips .thankyou


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics