Tab Sajian Horizontal Dengan Css Versi 3

Tampil bagus dengan perpaduan warna merah muda, tab hidangan horizontal dengan css versi 3 ini sangat cocok untuk blog yang dikelola oleh perempuan sebab secara umum, perempuan menyukai warna lembut terutama warna pink.
Tab hidangan horizontal versi 3 intinya sama dengan tab hidangan horizontal versi sebelumnya, yaitu memakai latar berupa gambar sebanyak dua buah dan hover (warna yang tampil waktu disorot mouse) ialah warna putih.

Demo : perhatikan gambar di bawah ini

LANGKAH-LANGKAHNYA

1. Masuk ke Blogger
2. Pilih Rancangan potongan Elemen Halaman
   
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Copy aba-aba dibawah in lalu paste pada kolom yang tersedia
   
   <style type="text/css">

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

img {
border: none;
}

#tabs {
float:left;
width:100%;
background:#FCF1F6;
font-size:93%;
line-height:normal;
border-bottom:1px solid #E276A7;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("https://lh3.googleusercontent.com/_1j80TgNqd_8/TbJJ-3clg8I/AAAAAAAACrM/sOEs2yCR3ME/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbJJ-tZEcLI/AAAAAAAACrI/HPnGvysoE3E/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#333;
}
#tabs a span {float:none;}

#tabs a:hover span {
color:#591333;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

#tabs #current a {
background-position:0% -42px;
}
#tabs #current a span {
background-position:100% -42px;
}

</style>
<div id="tabs">
<ul>

<li><a href="URL/link sasaran hidangan 1"><span>Menu 1</span></a></li>
<li><a href="URL/link sasaran hidangan 2"><span>Menu 2</span></a></li>
<li><a href="URL/link sasaran hidangan 3"><span>Menu 3</span></a></li>
<li><a href="URL/link sasaran hidangan 4"><span>Menu 4</span></a></li>
<li><a href="URL/link sasaran hidangan 5"><span>Menu 5</span></a></li>
<li><a href="URL/link sasaran hidangan 6"><span>Menu 6</span></a></li>
<li><a href="URL/link sasaran hidangan 7"><span>Menu 7</span></a></li></ul>
</div>
   
   
   1. Kode yang berwarna pink muda, pink tua, merah dan kuning merupakan aba-aba yang harus anda ganti.
   2. Kode dengan warna pink muda : https://lh3.googleusercontent.com/_1j80TgNqd_8/TbJJ-3clg8I/AAAAAAAACrM/sOEs2yCR3ME/tableft.gif merupakan aba-aba dari gambar latar 1. Ganti aba-aba tersebut dengan gambar milik anda sendiri. Ini tampilan gambarnya :
      
      
   
   
   3. Kode dengan warna pink bau tanah : https://lh5.googleusercontent.com/_1j80TgNqd_8/TbJJ-tZEcLI/AAAAAAAACrI/HPnGvysoE3E/tabright.gif merupakan aba-aba gambar latar 2. Ganti aba-aba tersebut dengan gambar simpanan anda sediri. Ini tamplannya :
      
      
   
   
   4. Kode dengan warna merah : URL/link sasaran hidangan 1, 2, 3, 4, 5, 6 dan 7 merupakan aba-aba untuk URL/alamat link sasaran dari setiap menu. Ganti dengan URL yang ingin anda jadikan link target.
   5. Kode dengan warna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan aba-aba untuk hidangan yang ingin anda tampilkan '
   6. Jika jumlah hidangan dari aba-aba diatas masih dianggap kurang, silakan anda tambah secukupnya sehabis anda memahami aba-aba yang harus ditambahkan.
   
   
6. Klik tombol Simpan sehabis simpulan pengeditan kode.
7. Lihat tab hidangan horizontal pada blog anda.
   

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

Bagikan Artikel ini