Breaking News
Loading...
Senin, 09 April 2012

Cara Membuat Menu Horizontal Blogger

Selamat sore semua, sore - sore gini emang paling enak nongkrong depan rumah sambil online, sambil cuci mata. hehe
Sebelumnya saya mau cerita, sebenernya dari awal saya bikin blog ini, sempet bingung gimana cara bikin menu horizoltal, dan akhirnya saya menemukan cara yang paling praktis dan gampang banget, apalagi untuk newbe kaya saya ini, hasilnya kalo menurut saya lumayan memuaskan kok..

Seperti biasa
-login ke dashboard blogger
-klik menu Disign / Rancangan
-klik Add Gadget / Tambah Gadget
-Pilih HTML/javascript
-masukan kode berikut :



<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 (#) dengan alamat url atau label, untuk memasukkan label, tambahkan 'search/label/nama label'
semoga artikel ini bermanfaat, jika ada yang tidak jelas tinggalkan komentar Anda.

2 komentar:

 
Toggle Footer