Tutorial bikin menu horizontal di blogger

Kali ini saya akan mencoba menulis tutorial / cara mudah bikin menu horizontal di blogger. Sebenarnya ada banyak cara untuk membuat menu horizontal di blogger, sehingga saya bingung mau menuliskan tutorial menu horizontal blogger yang bagaimana.

Akhirnya saya putuskan untuk menuliskan panduan membuat menu horizontal untuk blogger yang menurut saya mudah, dan semoga tutorial ini dapat di fahami dan mudah di praktik kan.

Oke langsung saja.

Panduan membuat menu horizontal blogger

1. Login ke dashboard blogger
2. Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
3. Klik Add Gadget / Tambah Gadget.
4. Pilih/klik opsi HTML/Javascript
5. Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
6. Klik Save / Simpan
7. Selesai

Nah itulah tutorial bikin menu horizontal blogger.

Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)

Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>                      
</div>

Keterangan.

ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.

Selamat mencoba dan semoga berhasil

Update  21 Mei 2012
Untuk mengatur lebar dan tinggi menu nya silakan edit pada bagian

.nav { background:#f5f5f5;width:100% z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;

Nah silakan rubah lebarnya dengan merubah angka 100% dengan lebar yang kamu inginkan, biasanya ditulis dalam ukuran px (contoh : width: 900px).

Ganti angak 35 pada kode  height:35px untuk mengatur tinggi menu.

Untuk mengedit yang lainnya silakan dicoba edit sendiri CSS nya. Yang saya maksud CSS itu adalah kode <style> sampai kode </style>

Update 13 Agustus 2012 Harap Dibaca

Bagaimana cara isi menu dengan artikel yang kita mau, agar lebih jelas silakan baca Cara Mengisi Menu Dengan Artikel Kita