TAB MENU HORIZONTAL DENGAN CSS VERSI 2

epg-studio.blogspot.com

Tab menu dengan CSS versi 2 memiliki sedikit perbedaan dari versi 1. yaitu terletak pada penambahan dua gambar sebagai latar belakang.
Tampilan secara umum berwarna abu-abu muda, kecuali menu pertama berwarna biru. Agar tampilannya lebih menarik setiap menu akan berubah warna jika disorot mouse yaitu tampil dengan warna yang sama seperti menu menu pertama.

Demo : Perhatikan gambar dibawah ini :

Jika berminat dengan Tab Menu dengan CSS versi 2, ikutilangkah-langkahnya :

1. Masuk ke Blogger
2. Pilih Rancangan bagian Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Copy code dibawah ini kemudian paste pada kolom yang tersedia
   
   <style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("https://lh4.googleusercontent.com/_1j80TgNqd_8/TbBDFXW2ZGI/AAAAAAAACmw/XYI1ea8q9WM/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbBDFlXCWPI/AAAAAAAACm0/2TX8nvw48S4/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
#tabsJ a span {float:none;}
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

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

</style>
<div id="tabsJ">
<ul>
<li id="current"><a href="URL/alamat menu 1"><span>Menu 1</span></a></li>
<li><a href="URL/alamat menu 2"><span>Menu 2</span></a></li>
<li><a href="URL/alamat menu 3"><span>Menu 3</span></a></li>
<li><a href="URL/alamat menu 4"><span>Menu 4</span></a></li>

<li><a href="URL/alamat menu 5"><span>Menu 5</span></a></li>
<li><a href="URL/alamat menu 6"><span>Menu 6</span></a></li>
<li><a href="URL/alamat menu 7"><span>Menu 7</span></a></li></ul>
</div>
   
   1. Kode yang berwarna ungu, pink, merah dan kuning adalah kode yang harus anda ganti
   2. Kode berwarna ungu : https://lh4.googleusercontent.com/_1j80TgNqd_8/TbBDFXW2ZGI/AAAAAAAACmw/XYI1ea8q9WM/tableftJ.gif merupakan alamat gambar latar 1, ganti alamat gambar tesebut dengan gambar milik anda. Ini tampilannya :
      
      
   3. Kode berwarna pink : https://lh5.googleusercontent.com/_1j80TgNqd_8/TbBDFlXCWPI/AAAAAAAACm0/2TX8nvw48S4/tabrightJ.gif merupakan alamat gambar latar 2, ganti dengan gambar milik anda. Ini tampilannya :
      
      
   4. Kode berwarna merah : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan menu/label dari blog anda. Ganti dengan menu yang ingin ditampilkan,
   5. Kode berwarna kuning : URL/alamat menu 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link target dari menu. Ganti dengan URL dari menu yang ingin anda tampilkan.
   6. Jika anda ingin menambah dengan beberapa menu lainnya, terlebih dulu harus memahami kode yang harus ditambahkan
6. Setelah selesai pengeditan kode, klik tombol Simpan
7. Lihat blog anda

Posted in: Tutorial Blogger