Perlukah sebuah menu dalam blog / site? Tentu saja, menu merupakan alat navigasi sebuah blog atau web site yang digunakan visitornya untuk menjelajah lebih jauh dalam blog / web site tersebut. Masalahnya, beberapa template baik itu bawaan dari blogger.com atau template jadi yang bisa kita download di internet kadang tak memiliki menu, tapi tenang saja kita dapat membuatnya sendiri dengan mudah.
Sekarang sudah banyak tutorial membuat menu horizontal yang beredar pada internet mulai dari yang sederhana hingga yang menggunakan animasi, kali ini kita akan mencoba membuat menu horizontal yang sederhana. Seperti dibawah ini :
Berikut kode menu horizontal :
<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:0px 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 :
- Ubah # dengan Link Tujuan Menu
- Ubah Menu dengan nama menu yang Anda inginkan
Cara memasangnya pada blog.
Cara 1 < Elemen Laman > :
- Masuk pada blog Anda
- Pilih Rancangan >> Elemen Laman
- Pilih Tambahkan Widget >> HTML/JavaScript
- Pastekan kode menu horizontal diatas pada widget
- Pindahkan wiidget munu kebawah Header blog Anda
Cara 2 < Edit HTML > :
- Masuk pada blog Anda
- Pilih Rancangan >> Edit HTML
- Centang Expand Template Widget terlebih dahulu
- Cari kode :
<div id='content-wrapper'>
- Pastekan kode Menu Horizontal tepat diatas kode <div id='content-wrapper'> tersebut
- Simpan Template dan lihat hasilnya
Selamat Mencoba & Happy Blogging
