tutorial-create-a-basic-navigation-menu-in-blogger

CREATE A BASIC NAVIGATION MENU AND EDIT PAGE TABS


16 AUGUST 2013 · TUTORIALS





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. Check related posts below for fancier options.


IMPORTANT TO NOTE (CLICK TO READ)
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; }

/*change the color when the mouse over */
.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> /* 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;}