Tab Hidangan Vertikal Dengan Css Versi 3

Tampil dengan variasi warna latar antara abu-abu muda dan abu-abu tua, hover dengan warna abu-abu renta dan tombol kecil berwana merah serta warna latar transparan.
Seperti biasa, jumlah sajian yang tampil pada pola tab sajian horizontal ini sebanyak 7 menu. Anda sanggup menambah jumlah sajian sesuai keperluan.
Demo : perhatikan gambar dibawah ini :

CARA MEMBUATNYA

1. Masuk ke Blogger
2. Pilih Rancangan bab Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Copy isyarat dibawah ini, lalu 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: 10px;
}

#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/TbaoHVOmGzI/AAAAAAAACuE/RR5jv_uc0Rk/menu.gif);
padding: 8px 0 0 30px;
}

#menu li a:hover, #menu li #current {
color: #FFF;
background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TbaoHVOmGzI/AAAAAAAACuE/RR5jv_uc0Rk/menu.gif) 0 -32px;
padding: 8px 0 0 30px;
}
</style>
<div id="menu">
<ul>
<li><a id="current" href="Url 1">Menu 1</a></li>
<li><a href="Url 2">Menu 2</a></li>
<li><a href="Url 3">Menu 3</a></li>
<li><a href="Url 4">Menu 4</a></li>
<li><a href="Url 5">Menu 5</a></li>
<li><a href="Url 6">Menu 6</a></li>
<li><a href="Url 7">Menu 7</a></li> </ul>
</div>
   
   
   1. Kode yang berwarna pink, coklat, merah dan kuning sanggup anda edit
      
   2. Kode berwarna pink : background: #FFF; merupakan isyarat warna untuk latar tab menu
      
   3. Kode berwarna coklat : https://lh6.googleusercontent.com/_1j80TgNqd_8/TbaoHVOmGzI/AAAAAAAACuE/RR5jv_uc0Rk/menu.gif merupakan isyarat alamat gambar latar. (ada dua). Ganti dengan alamat gambar milik anda. Tampilan gambar ibarat dibawah ini :
      
      
   
   
   
   4. Kode berwarna merah : Url 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link sasaran dari setiap menu. Ganti dengan URL.alamat link sasaran dari blog anda
      
   5. Kode berwarna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan sajian yang tampil pada tab menu. Ganti dengan sajian yang ingin anda tampilkan.


6. Setelah final pengeditan, klik tombol Simpan
7. Lihat Tab Menu Vertikan pada blog anda.

Selamat mencoba, agar bermanfaat....
Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini