Membuat Menu Horizontal di blog

  Membuat menu horizontal bisa dibilang penting karena dengan adanya menu horizontal blog akan lebih mudah di explore oleh visitor. Menu horizontal juga berperan sebagai navigasi blog sehingga dengan adanya menu horizontal blog akan membuat visitor lebih leluasa.

Untuk membuat menu horizontal yang dibutuhkan adalah dua extensi kode, yaitu kode CSS dan kode HTML. Kode CSS adalah kerangka dari menu horizontal itu sendiri, sementara kode HTML berfungsi untuk menampilkan struktur menu yang akan anda masukkan pada menu horizontal tersebut.

Berikut cara mudah membuat menu horizontal: 

1. Masuk ke Tata Letak  >  Tambah Widget . Pilih " HTML/JavaScript " atau untuk blok tampilan baru, klil Desain  >  Tata Letak  >  klik tambah Gadget lalu pilih HTML/JavaScript

2. Copy kode dibawah ini :

 <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 Yang berwarna MERAH dengan Alamat URL tujuan

*Ganti Yang berwarna BIRU dengan Tulisan yg akan ditampilkan

 *Beri Judul pada kotak judul, misalnya "Menu Horizontal"

3. Simpan

4. Jika tempat menu horizontal yang kamu buat belum sesuai/ salah tempat

klik kiri pada mouse kamu > tahan lalu geser "Menu Horizontal" kamu tepat dibawah header