Cara Bikin Menu

Mebuat Navigasi Bar (Tombol Menu)

Membuat Navigasi Bar dalam blog kelihatannya sudah menjadi keharusan jika ingin blog tampil lebih menarik. Disini ada 2 pilihan untuk membuat Navigasi Bar, yang pertama adalah dengan klik Posting >>> Edit Laman. Stelah selesai akan langsung jadi Bar Menu dalam blog secara otomatis. Keuntungan cara ini adalah mudah dan ga' repot, kita hanya postingan di tempat yang berbeda (Edit Laman) namun kerugiannya adalah lalu lintas blog kita jadi kacau (itu menurut saya), karena dalam menu bar dengan cara ini postingan yang lain menjadi tak terjangkau oleh pengunjung lain dan mengharuskan kita membuat lalulintas blog disamping postingan. Pokoknya repot dan makan banyak tempat dalam blog.

Adapun cara membuat menu bar yang ingin saya bagi adalah membuat menu bar seperti yang saya miliki ini adalah sebagai berikut :

1. login ke blog 
2. Dasbor
3. Rancangan (pilih blog yg dikehendaki)
4. Edit HML
5. klik Expand Tempelate Widget >>> blog semua script, copy paste dalam Notepad (save). Hal ini dilakukan buat jaga-jaga siapa tahu uji coba anda tidak berhasil. Sebagai catatan informasi adalah bahwa Expand Tempelate Widget ini memiliki arti bahwa anda ingin melakukan expansi penggunaan tempelate lebih dari penggunaan tempelate standar.
6. blok dan delet script tempelate tersebut dan gantikan dengan :

Sebelumnya cari dengan kontrol Ctrl + F pada keyboard kode berikut :

]]>

dan letakkan/copy - paste kode/script berikut diabawah ini tepat diatas kode  ]]> dan Simpan tempelate.




#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; 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: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; 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: #222222; color: #ffffff; 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: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; 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: #222222; color: #ffffff; 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; }

langkah beriktunya adalah, klik Rancangan >>> Tambah Gadget >>> HTML/Java dan  copy paste script berikut  ini dalam gadget tadi dan save

<div class='menuhorisontal'>
<ul id='nav'>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'></ul> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
</ul> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
</ul>
</div>

Catatan :

penggunaan script html tersebut contohnya adalah sebagai beriktu

<li><a href='http://hostinggratisan09.blogspot.com/'>Buat Blog Gratis</a> </li>
<li><a href='http://4lapindo.blogspot.com/'>Solusi Lumpur Lapindo</a> </li>

- yang bercorak merah adalah alamat url link postingan anda dan 

- yang bercorak biru adalah judul postingan ato tag postingan anda




Sumber : 

Pb, 2010. Membuat Menu Navigasi Horizontal dengan Sub Menu Navigasi Vertikal. (online) http: //pelajaran-blog.blogspot.com/2010/09/membuat-menu-navigasi-horizontal-dengan.html. diakses pada tanggal 12/19/2010