Cara Mudah Membuat Menu NAVIGASI HORIZONTAL DiBlog

Menu navigasi sangat penting adanya di blog, untuk mempermudah pengunjung untuk menjelajahi blog kita. Menu NAVIGASI HORIZONTAL ini juga menggunakan Drop Down Menu.

Berikut ini cara mudah membuat nya :

1.Login ke blog sobat
2.Rancangan > tata letak > add gadget pilih HTML/Javascript (* pilihlah gadget tepat dibawah header) ,kemudian copy dan pastekan kode dibawah ini.

<style>
#menunavigasihorisontal {
background: #8C7F7D;
width: 100%;

color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }

#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #3489F9;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}

#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}

#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;

-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;}

</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='http://www.andisitorus.com'>Home</a>
</li>
<li>
<a href='http://www.andisitorus.com'>Tentang Saya</a>
</li>
<li>
<a href='http://www.andisitorus.com'>Contact</a>
<ul>
<li><a href='http://www.andisitorus.com'>Halaman 1</a></li>
<li><a href='http://www.andisitorus.com'>Halaman 2</a></li>
<li><a href='http://www.andisitorus.com'>Halaman 3</a></li>
</ul>
</li>
<li>
<a href='http://www.andisitorus.com'>Daftar Isi ▼</a> <ul>
<li><a href='http://www.andisitorus.com'>Halaman 1</a></li>
<li><a href='http://www.andisitorus.com'>Halaman 2</a></li>
<li><a href='http://www.andisitorus.com'>Halaman 3</a>
<ul>
<li><a href='http://www.andisitorus.com'>Halaman 1</a></li>
<li><a href='http://www.andisitorus.com'>Halaman 2</a></li>
<li><a href='http://www.andisitorus.com'>Halaman 3</a></li>
</ul>
</li>
</ul> </li>
</ul>
</div>

3.Selanjutnya Simpan.
Keterangan : Ganti tulisan yang berwarna merah dengan Url yang sobat inginkan, ubah warna background dengan mengganti tulisan yang berwarna biru.
Untuk melihat kode warna klik disini
Selamat Mencoba !!!!