Cara Membuat Menu Horizontal Beserta Submenu

Sebagian besar para blogger dan pemilik website pasti mempunyai banyak halaman web untuk website ataupun blog mereka. Namun, jika kita berkunjung, bagaimana caranya untuk kita masuk ke halaman yang telah dibuat oleh si pemilik blog / site tersebut? Pasti pemilik pemilik website terseut membuat sebuah daftar yang berisi nama dan link untuk membuka halaman halaman web yang sudah disediakan. Inilah yang disebut dengan Menu.

Sebagian besar pula para blogger ingin membuat Menu Navigasi dengan indah. Toh, selain menu navigasi nya tampak indah pasti blognya juga akan tampak indah. Tapi, menu navigasi akan tampak lebih indah lagi jika warna menu tersebut disesuaikan dengan warna background blog anda. Tapi, terserah anda deh. Ayo kita mulai bereksperimen.

1. Mula mula login ke http://www.blogger.com
2. Masuk ke Rancangan > Edit HTML
3. Carilah kode ]]></b:skin>
4. Setelah ketemu, copy kode di bawah dan paste di atas kode yang tadi

#NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; 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 { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; 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; }

5. Sebelum melanjutkan ke langkah berikutnya, anda perlu menentukan posisi menu navigasi yang diinginkan. Biasanya menu navigasi diletakkan di atas header atau di bawah header. Misalkan anda ingin memasangnya di atas header, maka anda harus mencari kode <div id='header-wrapper'>

6. Cari yang mirip aja dengan kode yang diatas, kalau dah ketemu, silahkan copy dan paste kode ini:

<ul>
<li>Nama Halaman 1</li>
<li>Nama Halaman 2
<ul>
<li>Nama Sub Halaman 1</li>
<li>Nama Sub Halaman 2</li>
</ul>
</li>
<li>Nama Halaman 3</li>
</ul>

7. Selesai, anda juga dapat menambah dan mengubah daftar laman sesuai kemauan anda. Jika terdapat sesuatu yang tidak dimnengerti, atau ada pertanyaan, maka anda bisa mengisi komentar anda di bawah dengan pertanyaan anda. Terima Kasih.