Friday, January 30, 2009

Horizontal navigation menu bar table

Horizontal menu bar (navigation bar) is a frequent request of bloggers. There are many ways of doing it, including using CSS (Cascading style sheet) and <ul> (unordered list). Using table to create a horizontal menu bar (navigation bar) is a quick and dirty way like what has been done at Songs Lyrics Video. However, refer to Why tables are bad.

Menu bar with table

First, go to LAYOUT > EDIT HTML and look for showaddelement='No' and change it to showaddelement='yes'. If there is a maxwidgets='1' next to showaddelement='yes', change it to maxwidgets='' showaddelement='yes'

This will result in additional ADD A GADGETs to the Header section of the LAYOUT. If you are using either 3 column Minima template or the 4 column Minima template modified by me, that would already have been done and you will see a LAYOUT like the screen shot below:

Blogger Layout with additional ADD GADGETs

The additional ADD A GADGETs are highlighted with red and green ellipses. Depending on where you want the menu bar to be position, click on either one. In the case of Songs Lyrics Video, I have chosen to positioned it within the Header, so I clicked the one highlighted with the red ellipse. I then chose HTML/Javascript gadget and typed the following (formated for easy reading):

<table border="1"><tr>
<td><a href="URL 1">tab 1</a></td>
<td><a href="URL 2">tab 2</a></td>
<td><a href="URL 3">tab 3</a></td>

You can add as many ........ as you like.


Mr. O said...

This is a very useful tip thanks again.

Also I just created a nav bar on my site top left you can see it

I used the the info I got from this other blogger

Saranga Rathnayake said...

You can make your own one very easily,
Add Menu Bar To Blogger Blog

visit said...

hi, how can i make the tables have the same width? thanks for your prompt reply!

Patriot said...

Use the width attribute such as <table border="1" width="50">. However, don't know if you have read Why table is bad and agree with them. I am thinking of publishing another post using a simple row of hyperlinks or perhaps using CSS or both when I have the time.

visit said...

thanks! i read "layouts shouldn't use tables" and i kinda agree.

What im actually trying to do is to have a 3-column widget row right above blog posts and under the navigation, which i can't do.

i just thought creating a table will solve my problem, and it kinda does.

unless you have a script for a 3-column widget row, id appreciate it very much :)

i found these relevant articles:
1. split header into two-
2. create 3-column footer-

but i want it right under nav/ header and above the posts.

thanks again for the reply!