How to: creater a simple navigation menu

Skill Level: Easy, Skills Required: CSS

Navigation menus are very popular on websites these days and are relatively easy to create. Blogger has some good tools for creating your own for your blog. With a little CSS coding you can customize a Links List widget and turn it into a simple navigation menu.

Step 1: Add a Links List widget on your Layout: Page Elements page. Don't type anything for a title or anything for the number of links to show. You can have it sort if you want...but generally I like to choose the order myself. Add links you want in your navigation menu. Links like Home or About are popular. Once done, save your Link List widget.

Step 2: Drag your new Links List widget to the top of the page between the header and the blog posts (most templates have a section for this).

Step 3: Customize the style using CSS to display the links in a horizontal line instead of a bulleted list. The widget likely has the id LinkList1 (unless you have built another link list before). You will need to go to the Layout: Edit HTML page. Add the following CSS to display horizontally without bullets is:

#LinkList1 li {
diplay: inline;
list-style-type: none;
}

Step 4: Further customize the CSS to have a background color, then a new color to highlight the link when you hover over it. Use the following CSS with your own colors:

#LinkList1 a {
background-color: #CCCCFF;
}

#LinkList1 a:hover {
background-color: #F0F0FF;
}

Step 5: Enjoy your new navigation menu! There is plenty more you can do customizing the CSS further, but this example gives you the basic idea.