TAB MENU HORIZONTAL DENGAN CSS VERSI 3

epg-studio.blogspot.com


Tampil cantik dengan perpaduan warna merah muda, tab menu horizontal dengan css versi 3 ini sangat cocok untuk blog yang dikelola oleh wanita karena secara umum, wanita menyukai warna lembut terutama warna pink.
Tab menu horizontal versi 3 pada dasarnya sama dengan tab menu horizontal versi sebelumnya, yaitu menggunakan latar berupa gambar sebanyak dua buah dan hover (warna yang tampil waktu disorot mouse) adalah warna putih.

Demo : perhatikan gambar di bawah ini

LANGKAH-LANGKAHNYA

1. Masuk ke Blogger
2. Pilih Rancangan bagian Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Copy kode dibawah in kemudian 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 target menu 1"><span>Menu 1</span></a></li>
<li><a href="URL/link target menu 2"><span>Menu 2</span></a></li>
<li><a href="URL/link target menu 3"><span>Menu 3</span></a></li>
<li><a href="URL/link target menu 4"><span>Menu 4</span></a></li>
<li><a href="URL/link target menu 5"><span>Menu 5</span></a></li>
<li><a href="URL/link target menu 6"><span>Menu 6</span></a></li>
<li><a href="URL/link target menu 7"><span>Menu 7</span></a></li></ul>
</div>
   
   
   1. Kode yang berwarna pink muda, pink tua, merah dan kuning merupakan kode yang harus anda ganti.
   2. Kode dengan warna pink muda : https://lh3.googleusercontent.com/_1j80TgNqd_8/TbJJ-3clg8I/AAAAAAAACrM/sOEs2yCR3ME/tableft.gif merupakan kode dari gambar latar 1. Ganti kode tersebut dengan gambar milik anda sendiri. Ini tampilan gambarnya :
      
      
   3. Kode dengan warna pink tua : https://lh5.googleusercontent.com/_1j80TgNqd_8/TbJJ-tZEcLI/AAAAAAAACrI/HPnGvysoE3E/tabright.gif merupakan kode gambar latar 2. Ganti kode tersebut dengan gambar simpanan anda sediri. Ini tamplannya :
      
      
   4. Kode dengan warna merah : URL/link target menu 1, 2, 3, 4, 5, 6 dan 7 merupakan kode untuk URL/alamat link target 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 kode untuk menu yang ingin anda tampilkan '
   6. Jika jumlah menu dari kode diatas masih dianggap kurang, silakan anda tambah secukupnya setelah anda memahami kode yang harus ditambahkan.
6. Klik tombol Simpan setelah selesai pengeditan kode.
7. Lihat tab menu horizontal pada blog anda.

Posted in: Tutorial Blogger