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
- 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
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 2012Untuk 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 
