Create a basic navigation menu and edit page tabs on Blogger

Many blogs these days consist of two or more topics, your home feed can be a mix of several different things. To make it easier for readers to find what they are looking for, it’s important to have a navigation system.

Todays post will show you how to create a basic navigation bar to separate blog topics using the default styling from Blogger tabs and customising it. You can also use this to edit the look of tabs using the pages gadget.

Other navigation posts:

• Adding navigation to top of blog
• Making navigation stay/stick/fixed to top when scrolling
• Create a horizontal navigation menu using images
• Create a drop down navigation menu
• Remove borders from page tabs

Create a basic navigation bar

1. First thing you need to do is organise your blog labels/categories/tags. Split your blog into categories and sub-categories, create a label for each. When you write a new post, apply the correct label. Use the URL of each label as your link URL below.

Not sure how to do this? Here is a post on using Bloggers post labels as categories.

2. In the Layout tab, paste the following code in a new HTML/Javascript gadget and enter your own links & titles. I prefer doing this over using the pages or label gadgets, as it gives me more options.

<!-- START XOMISSE NAVIGATION --> 
<div id="navigationbar">
<ul id='cssnav'>
<li><a title="home" href="LINK">Home</a></li> 
<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
<li><a title="TITLE" href="LINK">TOPIC</a></li>
<li><a title="TITLE" href="LINK">TOPIC</a></li>
</ul>
</div>   
<!-- START XOMISSE NAVIGATION -->

Edit Navigation bar and page tabs

3. Go to Template > Customise > Advanced and edit the “Tabs” elements. This can change the borders, background and colour.

4. Now go to Template > Edit HTML. Within the CSS part (<b:skin> ... </b:skin>) you’ll see a tabs section which, depending on your template, may look something like this. If you’re comfortable with CSS and Blogger, you can fully customise your tabs here. If not, the next step will show you how and what to edit.

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: 1px solid #eeeeee;
}
.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 1px solid #eeeeee;
border-left: 0 solid #eeeeee;
border-right: 0 solid #eeeeee;
}
.tabs-inner .widget ul {
background: #666666 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: 1px solid #eeeeee;
margin-top: 0;
margin-left: -30px;
margin-right: -30px;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 14px Arvo;
color: #666666;
border-left: 1px solid #ffffff;
border-right: 1px solid #eeeeee;
}
.tabs-inner .widget li:first-child a {
border-left: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #999999;
background-color: #ffffff;
text-decoration: none;
}

5. If you aren’t comfortable with editing the above code yourself, here are the main areas that people like to change. Go to Template > Edit HTML and add the code before </b:skin>

/* Remove Spacing & Border of First Link in Navigation */
.tabs-inner .section:first-child ul {
margin-top: 0px;
border: 0 solid #eeeeee;
}

/* Background & Border of Navigation */
.tabs-inner .widget ul {
background: #999999;
border: 0px solid #eeeeee;
text-align: center  !important;
}

/* Font, Colour & Border of Links */
.tabs-inner .widget li a {
font: normal normal 14px Arvo;
color: #333333;
border: 0px solid #ffffff;
}

/* Font & Colour of Rollover Links */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #eeeeee;
background-color: #ffffff;
text-decoration: none;
}

/* Centre Navigation */
.tabs .widget li, .tabs .widget li{
display: inline;
float: none;} 

Remove Borders
Check out this post on how to remove borders from page tabs.

Showing in a bulleted list…

Because this tutorial is using the default styling for Blogger tabs/pages, it needs to be the right area of the template to pick up the CSS. In the layout tab drag your header, navigation and any other gadgets down a little. It will jump to the second level, this shouldn’t affect the look of your blog but it will add the default styling that can then be customised. This image will hopefully explain that better.

That doesn’t mean we can’t make it stick while scrolling or appear above the header or other elements. The tutorials below will show you how to do those things.