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 selesa.

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 "

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

3. Simpan

===================================
Update Code baru tanggal 28 - Januari 2012
===================================

Categories: Tutorial Blogger