Membuat Menu Horizontal di blog

Home / Tutorial Blogger / Membuat Menu Horizontal di blog

Membuat Menu Horizontal di blog

Posted by Rezqy Dwikara Goratama 25 Januari 2012

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>