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:



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="http://www.text-link-ads.com/?ref=52827">Earn with TextLinkAds</a></td><td><a href="http://generating-revenue-from-your-site.blogspot.com/2007/03/how-do-i-earn-from-adsense.html">Earn with Google AdSense</a></td><td><a href="http://generating-revenue-from-your-site.blogspot.com/2007/06/earn-with-amasenseads.html">Earn with AmaSenseAds</a></td><td><a href="http://www.auctionads.com/refer_2c73d07577f5a006e245">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="http://www.text-link-ads.com/?ref=52827">Earn with TextLinkAds</a></td><td><a href="http://generating-revenue-from-your-site.blogspot.com/2007/03/how-do-i-earn-from-adsense.html">Earn with Google AdSense</a></td><td><a href="http://generating-revenue-from-your-site.blogspot.com/2007/06/earn-with-amasenseads.html">Earn with AmaSenseAds</a></td><td><a href="http://www.auctionads.com/refer_2c73d07577f5a006e245">Earn with AuctionAds</a></td></tr></table></div>

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