GUSAR

Menu Navigasi Horizontal bisa anda membuatnya dengan beberapa cara, bisa menggunakan dengan menambahkan gadget Html/JavaScript ataupun langsung menambahkan kode CSS / Html pada Template anda.

Pada postingan ini mejelaskan cara membuat Menu Navigasi Horizontal CSS pada template anda, sebagai contohnya menu bar yang ada di atas, jika anda ingin mencoba membuatnya atau mengganti dengan tampilan seperti di atas masukan kode di bawah ini pada template anda;
1. Login ke blog anda
2. Tata Letak
3. Edit Html
4. Download "sebagai Cadangan"
5. Masukan kode berikut sebelum kode #main-wrapper{.......
#Nav-menu {
width: 100%;
height: 28px;
background: #0000FF;
margin: 0 ;
padding: 0;
font: bold 12px Arial, Tahoma, Verdana;
}
#nav-menuleft {width:100%;float: left; margin: 0; padding: 0;}
#nav {margin: 0;padding: 0;}
#nav ul { float: left; list-style: none; margin: 0; padding: 0;}
#nav li {float: left; list-style: none; margin: 0; padding: 0;}
#nav li a, #nav li a:visited {
color: #FFFFFF;
display: block;
text-transform: capitalize;
margin: 0;
padding: 5px ;
font: normal 12px Georgia, Times New Roman;
}
#nav li a:hover {
background:#FFFFFF;
color: #FF0000;
margin: 0;
padding: 5px;
text-decoration: none;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 50px;
margin: 0;
padding: 0;
}
#nav li li a, #nav li li a:visited {
background: #FF0000;
width: 150px;
color: #FFFFFF;
text-transform: lowercase;
float: none;
margin: 0;
padding: 5px;
border: 1px solid #000000;
text-align: left;
font: normal 12px Georgia, Times New Roman;
}
#nav li li a:hover{
background: #0000FF;
color: #fff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 5px ;
border: 1px solid #FFFFFF;
text-align: left;
font: normal 12px Georgia, Times New Roman;
}
#nav li:hover, #nav li.sfhover {position: static;}
#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 ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
dan cari lagi kode <div id='main-wrapper'> dan masukan lagi kode dibawah ini tepat di atas kode <div id='main-wrapper'> :
<div id='Nav-menu'>
<div id='nav-menuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Blogger</a>
<ul>
<li><a href='http://www.blogger.com/' target='new'>Contoh Blogger</a></li>
</ul>
</li>
<li><a href='http://amuysblog-berbagi.blogspot.com/' target='new'>Blog Berbagi</a></li>
<li><a href='http://amuys-templates.blogspot.com/' target='new'>Blog Template</a>
</li>
</ul>
</div>
</div><!-- end amuysMenu -->
6. Simpan Template,selamat mencoba.