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.

2 comments:

Theresa Tandoc said...

Hi. Thanks for writing a new post about my question.

About creating a menu, I've managed to do step 1 to 2 without any trouble. On step 3 where it says, "Insert this code where you want it in your page content (top, bottom, sides).
Delete the vertical bar from between the link for the third (sides) option."

Where exactly do I insert it? Sorry about this but I'm a noob when it comes to codes like these.

maiaT said...

Theresa,

1. Let's say you want the vertical menu (c) on the right side of your page.
Place the link list before your text in the post.
You can change the width of 100px to as much as you like.
2. For the top horizontal menu (a), inert the link list also before your post content.
3. Fir the bottom menu, at the end of your post.

Best you change the editor to HTML mode but you can do it in compose mode too.

Good luck!

Post a Comment

Thanks for taking the time to comment.
Please don't leave link in your comment. Thank you.

Search for photos, macro photos or paintings.

Related Posts Plugin for WordPress, Blogger...
Do you want to create a separate archive page for your blog too?
If yes, click the link above to go to the tutorial.