cara membuat menu horizontal di blog
Bila sahabat
blogger sudah mempunyai blog tentunya untuk memudahkan pengunjung berselancar
di blog sobat ada baiknya di buat menu pada blog sobat, baik itu menu dropdown,
horizontal, menu tab, dan menu lainnya.
tidak perlu
panjang lebar lagi saya akan membahas cara membuat menu Horisontal menu pada
blog , langsung saja ....kali ini saya mencoba memaparkan tentang proses
pembuatn menu horizontal secara sederhana tanpa mengedit Html lagi, langkahnya
sebagai berikut :
- Login ke dashboard blog sobat
- 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 seperti di bawah 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>
- Klik Save / Simpan
- Selesai
Catatan : 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 sobat inginkan.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang sobat inginkan.
Mudah bukan? Selamat mencoba !!
apabila agan menginginkan file dalam bentuk dokument silahkan dowunload disini
Langganan:
Posting Komentar (Atom)