Custom Navigation Tabs for Blogger Menu

Want to create a navigation menu for Blogger? A navigation menu can be used to organize your blog labels, or to add a menu button for a new Blogger page, or to link to another page on the web. This can be done using some basic HTML and CSS.

---

Creating the Menu Code
To start, you'll need to access the Layout for your blog. If you use the old Blogger interface, this is found under the "Design" tab. The "Layout" tab will work for the new Blogger interface. From here, you can add a new Gadget to your template. Most navigation bars can be found near the top of a website, but you can add your navigation bar anywhere that you'd like. The gadget you'll need to add is "HTML/Javascript".
In your gadget box, enter the following code:

<div id="nav">
<a href="">Blog Home</a>
<a href="http://www.lightwayweb.com">Lightway Web Services, Inc.</a>
</div>

Here is how the code works. The DIV tag is the container for the navigation bar. The ID command with the label "nav" associates our menu bar with the design styles that we will add in the next step. The next tags are the "A" tags. Each of these "A" tags is an individual button in our navigation bar. In this example, we have two menu buttons created. Each button will take us to the blog home. The first is labeled, "Blog Home", and the second is labeled, "Lightway Web Services, Inc.". The second button also contains addition criteria. The HREF command tells us the web address for which the navigation button will direct the user to when clicked. In this case, it will take us to the Lightway Web website. This can be changed to any address such as a blog post, blog page, or group of posts. You can copy and paste this link from your blog address. The TARGET command is an option. The "_blank" variable used here tells the blog that when this button is clicked, the user will be directed to a new browser window.
From here, you can add as many buttons you like by adding additional lines within the proper "A" tags.

---

Creating the Design Style for the Navigation Menu
The next step is to access the "Edit HTML" using the old Blogger format, or "Template" and "Edit HTML" using the new Blogger format. Within the HTML coding, you will want to locate the following code:

]]></b:skin>

Just above this code, paste the following:

/* Navigation Menu
----------------------------------------------- */

#nav {
padding-top:6px;
padding-bottom:16px;
margin-left:2px;
font: bold 12px Arial;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

#nav a {
display: inline;
text-decoration: none;
padding: 11px;
margin-right: -3px;
border-left: 1px solid #BBBBBB;
border-right: 1px solid #333333;
border-bottom: none;
background-color:#006633;
color: #FFFFFF;
}

#nav a:hover {
background-color:#006633;
color: #FFFFFF;
}

---

This CSS code should provide you with the basics for creating your custom navigation menu. All CSS styles within this template code can be adjusted to fit your design style.