Membuat navigasi horizontal sublevel sesuai selera

Navigasi horizontal merupakan keperluan sebuah blog atau web untuk mengatur menu-menu yang ada di dalamnya, dimana masing-masing dari kita pasti nya menginginkan yang terbaik untuk tampilan blog kita. Bagi yang mempunyai niat ingin mempunyai tampilan navigasi horizontal sublevel sesuai selera anda, mudah-mudahan tutorial ini cocok. karena panjang, warna, penampatan dan lain sebagainya bisa di ubah menurut panduan tutorial di bawah.


Navigasi ini cocok sekali bagi yang ingin navigasinya mempunyai turunan ketika di sentuh mouse (sub level / multilevel horizontal), dan anda bisa menambah dan memodifikasinya untuk mempercantik navigasi sesuai keinginan anda.

Jika perlu contoh langsung, silahkan masuk ke blog Armynd Scene ,disana saya memodifikasi dengan tampilan secara elegan. bagi yang menyukainya tinggal di copas aja.

Oke, langsung saja kita ke tutorial:

1.Masuk ke Blogger
2.Klik rancangan
3.Edit HTML
4.Centang Expand Template Widget
5.Lalu Copy kode di bawah ini tepat diatas ]]></b:skin> (cari dengan ctrl+F pada browser anda)

/* Menu Horizontal
-----------------------------------------------*/

#NavbarMenu{background:#3e424a; width:570px; height:30px; color:#3B5998; margin-left: 5px; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-bottom:3px solid #9e9e9e; float:left;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
}
#NavbarMenuleft{width:700px; 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; text-shadow:1px 1px 1px #000;
border-right: solid 5px #878787;
}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Verdana;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;
background: -moz-linear-gradient(top, #FFF, #9e9e9e);
background: background-color:rgba(255, 255, 255, 0.25);
}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#9e9e9e; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 5px; border-bottom:1px dotted #151f23; border-left: px solid #151f23; border-right:px solid #151f23; font:normal 12px Arial, Verdana;
-webkit-box-shadow: 5px 5px 6px #818181;
-moz-box-shadow: 5px 5px 6px #818181;
}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 5px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:160px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 160px;}
#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;}

6.dan copy lagi kode berikut:

<!-- menu horizontal start -->

<div id='outer'>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
 
<li><a href='http://martajasa.blogspot.com/'>Home</a></li>
 
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://caraonline.blogspot.com/search/label/BLOGGER' target='_blank'>Blog</a></li>
<li><a href='http://caraonline.blogspot.com/search/label/PHOTOSHOP' target='_blank'>Photoshop</a></li>
<li><a href='http://caraonline.blogspot.com/search/label/LAIN%20-%20LAIN' target='_blank'>Campuran</a></li>  
</ul></li>

<li><a href='#'>Facebook</a>
<ul>
<li><a href='http://martajasa.blogspot.com/search/label/FACEBOOK'>Artikel</a></li>
<li><a href='http://caraonline.blogspot.com/search/label/FACEBOOK' target='_blank'>Tutorial</a></li>
</ul></li>

<li><a href='#'>music</a>
<ul>
<li><a href='http://martajasa.blogspot.com/search/label/MUSIK'>Artikel</a></li>
<li><a href='http://martajasa.blogspot.com/search/label/SONG%20LYRICS'>Lirik</a></li>
<li><a href='http://martajasa.blogspot.com/search/label/FREE%20DOWNLOAD%20MP3'>Download</a></li>
</ul></li>

<li><a href='http://martajasa.com'>News</a></li>

<li><a href='http://martajasa.blogspot.com/2011/07/ruang-tukar-link.html' target='_blank'>Tukar Link</a></li>

</ul></div></div>
</div>

<!-- menu horizontal end -->

7.Lalu letakkan kode di:

Jika navigasi ingin berada di bagian atas header, Taruh kode diatas tepat di bawah kode <div id='header-wrap'> atau <div id='header-wrapper'>

jika ingin di bagian bawah header (atas posting), taruh kode diatas <div id='content-wrap'> atau <div id='content-wrapper'>

8. Modifikasi sendiri

- Ubah kode merah pada point nomor 5 untuk warna ,dan warna pink untuk ukuran panjang sesuai selera anda

- kode -moz-border-radius adalah untuk lengkungan pada setiap sudutnya. perbesar ukuran jika ingin membuat lebih bulat lagi

- kode warna #878787 adalah untuk border pada pinggir setiap item menu

- background: -moz-linear-gradient dan background: background-color:rgba adalah pengaturan untuk gradasi ketika mouse di sorot ke item menu.

- Silahkan ubah setiap angka yang di awali dengan tanda pagar ( # ), karena itu adalah kode warna.

- Ubah link nama item dan sub item yang berwarna hijau pada point nomor 6

- Anda bisa membuang kode target='_blank' pada point nomor 6 jika tidak ingin halaman membuka baru ( Open New Tab ).

Silahkan berkreasi sendiri. selamat mempunyai menu navigasi ala blog mu sendiri dan semoga Cara membuat Navigasi horizontal sublevel / multilevel ini bermanfaat buat blog anda.

Review:

Judul	Membuat navigasi horizontal sublevel sesuai selera
Deskripsi	Navigasi horizontal merupakan keperluan sebuah blog atau web untuk mengatur menu-menu yang ada di dalamnya, dimana masing-masing dari kita ...
Author	Unknown
Author Rating	4/ 5 Suara Dari 1001 Ulasan

Dapatkan artikel menarik lainnya : Klik disini

7 komentar sudah masuk. Silahkan menambahkan tanggapan lain...
Komentari