TAB MENU VERTIKAL DENGAN CSS VERSI 2
Perpaduan
warna latar antara warna biru dengan warna orange dan ditambah penunjuk
arah (anak panah) dengan persilangan dari warna latar secara umum.
Penampilan Tab Manu Horizontal versi 2 ditata dengan warna yang lembut sehingga sangat nyaman utuk dipandang apalagi kalau dipadukan dengan warna blog yang selaras dengan tampilan dari tab menu ini.
Penampilan Tab Manu Horizontal versi 2 ditata dengan warna yang lembut sehingga sangat nyaman utuk dipandang apalagi kalau dipadukan dengan warna blog yang selaras dengan tampilan dari tab menu ini.
Demo :
LANGKAH-LANGKAHNYA
- Masuk ke Blogger
- Pilih Rancangan bagian Elemen Halaman
- Klik Tambah Gadget
- Pilih HTML/Javascript
- Copy kode dibawah ini kemudian paste pada kolom yang tersedia
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menu {
width: 200px;
margin: 5px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFF;
display: block;
background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TbDbvTH4KoI/AAAAAAAACns/BrFma12kNvY/menu.gif);
padding: 8px 0 0 45px;
}
#menu li a:hover, #menu li #current {
color: #FFF;
background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TbDbvTH4KoI/AAAAAAAACns/BrFma12kNvY/menu.gif) 0 -32px;
padding: 8px 0 0 45px;
}
</style>
<div id="menu">
<ul><li><a id="current" href="URL/alamat menu 1">Menu 1</a></li>
<li><a href="URL/alamat menu 2">Menu 2</a></li>
<li><a href="URL/alamat menu 3">Menu 3</a></li>
<li><a href="URL/alamat menu 4">Menu 4</a></li>
<li><a href="URL/alamat menu 5">Menu 5</a></li>
<li><a href="URL/alamat menu 6">Menu 6</a></li>
<li><a href="URL/alamat menu 7">Menu 7</a></li></ul>
</div> - Cara pengeditan kode
- Kode berwarna coklat (dua buah) :
https://lh6.googleusercontent.com/_1j80TgNqd_8/TbDbvTH4KoI/AAAAAAAACns/BrFma12kNvY/menu.gif
merupakan alamat gambar latar. Ganti dengan alamat gambar milik anda. ni gambarnya : - Kode berwarna merah :
URL/alamat menu 1, 2, 3, 4, 5, 6 dan 7
merupakan URL/alamat link target dari menu. Ganti dengan URL/alamat link target yang ngin anda tampilkan. - Kode berwarna kuning :
Menu 1, 2, 3, 4, 5, 6 dan 7
merupakan menu yang akan tampil, ganti dengan menu yang anda inginkan. - Tambahkan beberapa menu lainnya setelah anda memahami kode-kode diatas
- Kode berwarna coklat (dua buah) :
- Setelah selesai pengeditan, klik tombol Simpan
- Lihat Tab Menu Horizontalpada blog anda.
Selamat mencoba, semoga bermanfaat...
Read more: http://epg-studio.blogspot.com/2011/04/tab-menu-vertikal-dengan-css-versi-2.html#ixzz2HlVhtGrS
Tidak ada komentar:
Posting Komentar