How to Create Menu Navigation Horizontal at Blogspot

Menu Dropdown Horizontal

Menu Navigation of a widget that point to facilitate the restructuring or laying down menus on the blog, with a navigation menu of the blog visitors are not hard to find an article.

Menu navigation can also be designed with a variety of styles using Cascading Style Sheets (CSS) so attractive when viewed, it also can enhance your blog.

Ok, I'll show how to make css for the header navigation menu, below the existing css ready in pairs on your blog;


How to setup the navigation menu on blogspot is easy.

1. Login to your Blogspot
2. Select Tab Design
3. Click Edit HTML
4. Backup your template if necessary, to prevent these things happen that are not desirable in the installation of navigation.
5. Find this code ]]></b:skin>, so easy in use Ctrl + F search
6. Copy CSS and paste the above ]]></b:skin>

7. Cascading Style Sheet ( CSS )

#NavbarMenu {
width: 900px;
height: 30px;
position: relative;
background:#0c0d0c url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_usqkzuHnTmlxqnEgPOcFTtaDjYIWOPpo4Zdjczfb_bBei9BAve3jwXWl105BrWxrt2bdlb42oaagcRwkzSFpW3THli7YpLzCIppLpjZtWvH5bcN13b9Wt-OHQA5I7LbcCOQ8py1lOk/s1600/Menubar.gif') repeat-x top;
color: #FFFFFF;
margin-top: 1px;
margin-left: auto;
margin-right: auto;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFFFFF;
display: block;
text-transform: capitalize;
margin: 0;
padding: 7px 14px 8px;
font: bold 12px ARIAL;
}
#nav li a:hover, #nav li a:active {
background:#550000;
color: #FFFFFF;
margin: 0;
padding: 7px 14px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #FFFFFF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH4hYru-zcWyAs4bNwI7yF-GE4tUgZ6rf9R9Ec3A6Eh_VeUCjvecOzp3bGP9OeB6V2pIUH1h22j2XoA1cqkLcxxrJDzHi4RdfYqBBAc0DCgcxVGfz1pzckpLi6GdDfXX6rX1xyqMg43jg/s1600/Navbar_hover.gif') repeat-x top;
width: 150px;
color: #FFFFFF;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 0px solid #0c0d0c;
border-left: 1px solid #0c0d0c;
border-right: 1px solid #0c0d0c;
font: normal 14px,;
}

#nav li li a:hover, #nav li li a:active {
background: #61a700;
color: #000000;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

8. HTML, is to create a link on the navigation menu;

<div id='NavbarMenu'> <!-- start navbar -->
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='Url'>HOME</a></li>
<li><a href='#' target='_blank' title='Menu'>MENU</a>
<ul>
<li><a href='Url/search/label/domain' target='_parent' title='Domain'>Free Domain</a></li>
<li><a href='Url/search/label/hosting' target='_parent' title='Hosting'>Free Hosting</a></li>
<li><a href='Url/search/label/tutorials' target='_parent' title='Tutorials'>Tutorials</a></li>
</ul>
</li>
<li><a href='#' target='_blank' title='Contact'>CONTACT US</a></li>
</ul>
</div>
</div> <!-- end navbar -->

9. Copy HTML, then paste the below </header>
10. Preview and Save Template

Note:

1. Width: 900px; this template width, change with the size of your template
2. URL, it addresses the link, replace it with a link to your blog, for example http://yourname.blogspot.com
3. If you want to add a link menu and sub menu links, see below how to add links;

<ul id='nav'>

<li><a href='Url'>HOME</a></li>

<li><a href='#' target='_blank' title='Menu'>MENU</a>

<ul>

<li><a href='URL' target='_parent' title='Menu1'>Menu1</a></li>

<li><a href='URL' target='_parent' title='Menu2'>Menu2</a></li>

<li><a href='URL' target='_parent' title='Menu3'>Menu3</a></li>

<li><a href='URL' target='_parent' title='Menu4'>Menu4</a></li>

</ul>

</li>

<li><a href='#' target='_blank' title='Tutorials'>Tutorials</a>

<ul>

<li><a href='URL' target='_parent' title='Tutorials1'>Tutorials1</a></li>

<li><a href='URL' target='_parent' title='Tutorials2'>Tutorials2</a></li>

<li><a href='URL' target='_parent' title='Tutorials3'>Tutorials3</a></li>

<li><a href='URL' target='_parent' title='Tutorials4'>Tutorials4</a></li>

</ul>

</li>

<li><a href='#' target='_blank' title='Software'>Software</a>

<ul>

<li><a href='URL' target='_parent' title='Software1'>Software1</a></li>

<li><a href='URL' target='_parent' title='Software2'>Software2</a></li>

<li><a href='URL' target='_parent' title='Software3'>Software3</a></li>

<li><a href='URL' target='_parent' title='Software4'>Software4</a></li>

</ul>

</li>

<li><a href='URL' target='_blank' title='Profile'>Profile</a></li>

<li><a href='URL' target='_blank' title='Contact'>CONTACT US</a></li>

</ul>

Description :

• The color Red is a Menu link
• The color Blue is a Menu Item link

Hopefully these tips can help you in the installation of navigation, Good luck .....