Simple Horizontal Navigation Menu

In this topic, I will discuss on how to add a simple Navigation Menu to your Blog or Website with simple steps.

Let's allow visitors to navigate to all the pages in your Blog or Website through a simple and stylish Navigation Menu bar. This allows your visitors to crawl up on all your web pages easily.

let's get started,

Horizontal Navigation Menu Bar

• Go to your "Blogger Dashboard" and click on the blog to which you would like to add the Navigation Menu Bar.
• From the options to left of webpage, select and click on "Layout".
• Next, click "Add a  Gadget".
• A popup window opens, now copy and paste the below code in the content box.

<style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#008B8B; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#20B2AA; } </style> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>

• Click "Save" to save the Widget.
• Now click on "Save Arrangement" and refresh your blog to see whether it works.

Vertical Navigation Menu Bar 

• If you would like to add vertical navigation menu bar on your blog or website, just copy and paste the below code.
  
  

<style> ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#008B8B; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#20B2AA; } </style> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>

Customizing the Navigation Menu Bar:

You can customize the Navigation Menu Bar, by changing the specific values.

• To change the back ground color, change the values here " background-color:#008B8B;". replace "#008B8B" with other values.
• To change the hover background color, change the values here 

 a:hover,a:active
 {
background-color:#20B2AA;
}.

• To change the font color, change the values here font-weight:bold; color:#FFFFFF; .

•  To link the pages to the Menu tabs, just replace "#tab name" with your URL links of the pages in <a href="#home">. For instance, If I would like to add my home page to Home tab, I will paste my link in the place of  " #home " which looks like <a href="http://viniwebworld.blogspot.com/">.
• You can also add extra menu tabs just by adding  "<li><a href="#tab url">your tab name</a></li>" between <ul> and </ul>.

Just apply these simple steps on your blog and check whether it works. For any queries or further information, subscribe to ViNi Web World.