New Blogger Tips For Us: Make Navigation Bar

In How To Make The Navigation Menu Bar on Blogspot (I) we have discuss how to make the navigation links menu with simple HTML script. In this article we will learn how to make it more attractive with CSS.
To do so, besides displaying the menu links with the facilities of HTML/JavaScript Widget, first we must declare the CSS code for these links to set the appereance, than put this CSS in our HTML Template.

1. Simple Navigation Bar Menu.
Besides as we did in How To Make The Navigation Menu Bar on Blogspot (I) , we can create a simple navigation bar menu in the way below, although a bit busy because we have to declared the CSS Code first, but we can easily set the appereance later.

In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS between <head>...</head>, I suggest to put in under /*Header*/ or ]]></b:skin> to make it easy to remember.

#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

You can set the font size larger or smaller, you can also set the padding and the margin to set the space in between the word. If you want add a border around the word then you can set the border value at least 1 px. Don't forget to click Save Template.

The next step is create the menu links list (as we did in How To Make The Navigation Menu Bar on Blogspot (I) but in a LIST form).
On your Dashboard > Layout > Page Elements, and click Add a Gadget on Header. and choose to add HTML/JavaScript.

Note : If you want to add "Add a Gadget" Widget on your Page Elements Please visit http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html .

Leave the Title Column empty, Copy the Script below and insert in the column content

<div id='navbarmenu'>
<ul>
<li><a href="URL of Your Home page">Home</a></li>
<li><a href="URL of Your Music page">Music</a></li>
<li><a href="URL of Your Books page">Books</a></li>
<li><a href="URL of Your Video page">Video</a></li>
<li><a href="URL of Your Profile page">About Me</a></li>
<li><a href="mailto:YOUR EMAIL ADDRESS">Contact</a></li>
</ul></div>

Change the URL Link and relevant words with yours. If you want to make link for your "Label" or "About Me", you can simply click your "Label" or "About Me" in the sidebar and look at your browser navigation bar, just copy and paste into the URL Link

The following example are "Home", "About Me" and "Contact" of this blog..

<a href="doit2us.blogspot.com">Home</a>
<a href="http://www.blogger.com/profile/07471629071890951823">About Me</a>
<a href="mailto:mc4tur@gmail.com">Contact</a>

After Save it, you can move this link widget, try to put it under the header or above the blog posts than try to preview the template. Click SAVE after you make sure the location of your menu link widget.

2. Add a different setting of each link menu (03/02/2010)

If we want to make the different setting of each link menu (eg background color) than we must declare the setting by each link. After we made the links than we give a "class" on each.

Exactly the same steps as above, but we declare CSS for each link (so not longer in a list form). For example we call it by the numbers: newnavbar1, newnavbar2, newnavbar3 and so on.

a.newnavbar1{
font-size:100%;
list-style-type: none;
display:inline;
background:#333399;
padding:3px;
color:#ffffff;
border:0px solid;
}

a.newnavbar2{
font-size:100%;
list-style-type: none;
display:inline;
background:#ff0000;
padding:3px;
color:#ffffff;
border:0px solid;
}

a.newnavbar3{
font-size:100%;
list-style-type: none;
display:inline;
background:#339966;
padding:3px;
color:#ffffff;
border:0px solid;
}

a.newnavbar4{
font-size:100%;
list-style-type: none;
display:inline;
background:#ff6600;
padding:3px;
color:#ffffff;
border:0px solid;
}

a.newnavbar5{
font-size:100%;
list-style-type: none;
display:inline;
background:#cc99ff;
padding:3px;
color:#ffffff;
border:0px solid;
}

And in the Column Content Configure HTML/JavaScript we make a modification by add script class="newnavbar1" for the first link (eg Home), Please match with the link you created.
And in accordance with the setting in the CSS, then we should also write the link one by one just like in the simple HTML Links How To Make The Navigation Menu Bar on Blogspot (I)

<a href="URL of Your Home page" class="newnavbar1">Home</a>
<a href="URL of Your Music page" class="newnavbar2">Music</a>
<a href="URL of Your Video page" class="newnavbar3">Video</a>
<a href="URL of Your Profile page" class="newnavbar4">About Me</a>
<a href="mailto:YOUR EMAIL ADDRESS" class="newnavbar5">Contact</a>

To make it more attractive, you can add a visited link and hover effect, for that you must add the following script below your CSS.

a.newnavbar1:hover, a.newnavbar2:hover, a.newnavbar3:hover, a.newnavbar4:hover, a.newnavbar5:hover {
background:#41a317;
color:#ffffff;
}
a.newnavbar1:visited, a.newnavbar2:visited, a.newnavbar3:visited, a.newnavbar4:visited, a.newnavbar5:visited {
color:#57e964;
}

Click Save and try to view your colourful link..

Some people tend to choose a simple display. If you want to display your menu navigation bar background in one color only or even the same color with your background page, then you can use the CSS code in a list form like in the no. 1 above.
Here is an example of CSS script if we use the same background and just add a visited and hover effects.

#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#navbarmenu li a{
color:#dfffed;
}

#navbarmenu li a:visited {
color: #57E964;
}

#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}

And we use the same step and the same HTML/JavaScript as in no.1. Simple Navigation Bar Menu.

Not like WordPress which provides navigation facilities in the header of the blog, Blogspot does not have it.
So if we want to have Navigation (Links) Page on the header Blogger/Blogspot then we must first create our own. This article will explain "How to Make The Navigation Bar (Links) Menu on Blogspot".

Navigation Bar is a link to the address we are going to (in the same pages, other pages within a site, or even in the pages of other sites). We provide this facility to our site / blog to accelerate or to shorten access to the link address (spesific phrase, articles, menu or anything that we think is important or interesting for our guests).

Because it is "a link", then we can create a simple Navigation Page with HTML. Script for links in HTML is:

<a href="Location_of_Document">Name of The Link</a>

The following are some example for it :

<a href="doit2us.blogspot.com">Home</a> | <a href="http://www.blogger.com/profile/07471629071890951823">About Me</a> | <a href="mailto:mc4tur@gmail.com">Contact</a>

and the result will look as follows:

Home | About Me | Contact

The Next step is put these link into the header bloger, or right under the header bloger.

1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, and click the Page Element.
3. Click (one of) "Add a Gadget".

Note :If you want to add facilities "Ad a Gadget" on the Header and Blog Posts ... Please read How to Add The "Add a Gadget" on Header and Blog Posts of Blogger Page Elements
4. From the "Add a Gadget window pop up", choose/click the HTML/JavaScript.

5. On the page "Configure HTML / JavaScript", enter The Links in HTML Script, such as the example below.

Then click Save, "Configure HTML/JavaScript" page will disappear and you will be brought back to the "Page Elements" page, with The "New" HTML/JavaScript Widget

Note : The position of the HTML / JavaScript widget can vary depending on the "Add a Gadget" that you choose. In the example above I use a "Header Add a Gadget".

6. The next step is to set the laying of the Page Navigation (Links).
If you want to put it in the header, then arrange for the following position.