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
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)
Update 21 Mei 2012
Untuk mengatur lebar dan tinggi menu nya silakan edit pada bagian
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>
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.
- Login ke dashboard blogger
- Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
- Klik Add Gadget / Tambah Gadget.
- Pilih/klik opsi HTML/Javascript
- Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
- Klik Save / Simpan
- Selesai
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)
Keterangan.<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>
ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.Selamat mencoba dan semoga berhasil
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.
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 
