Create a menu for a simple static page-Blogger

This tutorial is about creating a menu on a simple static page, after hiding all widgets.

In my previous tutorial we customized a static page, better said, downgraded it to a simple page, by hiding all widgets, including the menu.

But what if I still want a menu somewhere on the page, with a few links?
This was the question of one of my readers of the previous tutorial and a very good one.

On each static page you have a link to your home page at the bottom of the page, by default.
In case you would like some kind of navigation with more links, just place your links in a div (or span) container and place the div where you want the menu.
You could also create a two column page if you want to show more content.

Step by step:

A. Create a menu

1. First let's create a class for a minimal styling of this menu. Name it as you wish, let's say "navigation".
   I give you three examples below with the menu placed in different locations on the page:


1. horizontal top navigation:
   .navigation {text-align:right;padding-bottom:10px;padding-right:20px;}
2. horizontal bottom navigation:
   .navigation {text-align: center; margin-top: 10px; padding:5px; background: #DEE9F4;}
   This one has a background color, you can change or delete the color code in red.


3. vertical navigation on the sides:
   .navigation {float:right; width: 100px; margin-left: 20px; padding: 1px; border:1px solid #DEE9F4;}
   .navigation a {display: block; padding-left:5px; background: #DEE9F4; margin:1px;}
   This one has a background color, margins and a border.
   
   Choose one of the above situations and place this code after the rest of style code before the closing style tag, as shown in the hiding all widgets tutorial.


2. Create a simple link list with your links and place the class in front of the list like this:
   
   <div class="navigation"> <a href="http://firts page url">Home</a> | <a href="http://second page url">Portfolio</a> | <a href="http://third page url">About Me</a> | <a href="http://fourth page url">Contact</a></div>
   Replace the code in red with your own url-s and the green one with your tab's text.


3. Insert this code where you want it in your page content, meaning:
   - at the beginning of your post content for position a and c
   - at the bottom of the page, after the content, for position b. Delete the vertical bars from between the links for the option.
   - if you copy the above list code, your editor must be in Html mode when you paste it.
   
   This is just a modest link list, don't expect anything fancy.

B. Create a two column page - magazine style:

Now that is really easy and you have a better control over your content.
Divide your page in two with two div containers, float one to the left and the other to the right, like this:

<div style="width: 90%; float: left;">CONTENT HERE</div><div style="width:10%; float: right;">VERTICAL NAVIGATION</div>
<!--Clear the divs if you want some more content bellow them-->
<div style="clear: both;"></div>

Change the width of the columns (in red) as you wish!
Here is an example of magazine style page: Demo

That's all for today! Please ask if you have questions.