Tab Hidangan Vertikal Dengan Css Versi 1

Tab sajian vertikal versi 1 ini mempunyai tampilan yang menarik dengan variasi latar berupa warna(abu-abu) dan latar gambar warna merah dengan hover warna hijau . Tab sajian horizotal ini sanggup anda isi dengan label atau apa saja yang berdasarkan anda cocok ditampilkan.

Demo : Perhatikan gambar dibawah ini :



LANGKAH-LANGKAHNYA

1. Masuk ke Blogger
2. Pilih Rancangan bab Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Copy arahan 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;
}
#menu12 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}
#menu li a:link, #menu12 li a:visited {
color: #666;
display: block;
background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TbDMNGdtyeI/AAAAAAAACnQ/VAL9UAUGvw0/menu.gif);
padding: 10px 0 0 35px;
}
#menu li a:hover, #menu li #current {
color: #000;
background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TbDMNGdtyeI/AAAAAAAACnQ/VAL9UAUGvw0/menu.gif) 0 -32px;
padding: 10px 0 0 35px;
}
</style>
<div id="menu">
<ul>
<li><a id="current" href="URL/alamat sajian 1">Menu 1</a></li>
<li><a href="URL/alamat sajian 2">Menu 2</a></li>
<li><a href="URL/alamat sajian 3">Menu 3</a></li>
<li><a href="URL/alamat sajian 4">Menu 4</a></li>
<li><a href="URL/alamat sajian 5">Menu 5</a></li>
<li><a href="URL/alamat sajian 6">Menu 6</a></li>
<li><a href="URL/alamat sajian 7">Menu 7</a></li></ul>
</div>


6. Kode yang berwarna coklat, merah dan kuning sanggup anda ganti dengan tampilan yang dinginkan
   1. Kode warna coklat (ada dua) : https://lh6.googleusercontent.com/_1j80TgNqd_8/TbDMNGdtyeI/AAAAAAAACnQ/VAL9UAUGvw0/menu.gif merupakan alamat image untuk latar. Ganti alamat tersebut dengan alamat gambar milik anda. Ini gambarnya :
      
      
   
   
   2. Kode berwarna merah : URL/alamat sajian 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link sasaran dari menu. Ganti dengan URl/alamat link sasaran yangdiinginkan.
   3. Kode berwarna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan sajian yang tampil pada tab menu. Ganti sesuai keinginan
   4. Silakan anda tambah jumlah sajian yang ingin ditampilkan sesuai dengan pemahaman perihal kode-kode diatas
      
7. Setelah jawaban pengeditan, klik tombol Simpan
8. Lihat tab sajian vertikal pada blog anda.

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

Bagikan Artikel ini