Tab Sajian Horizontal Dengan Css Versi 2

Tab sajian dengan CSS versi 2 mempunyai sedikit perbedaan dari versi 1. yaitu terletak pada penambahan dua gambar sebagai latar belakang.
Tampilan secara umum berwarna abu-abu muda, kecuali sajian pertama berwarna biru. Agar tampilannya lebih menarik setiap sajian akan berubah warna bila disorot mouse yaitu tampil dengan warna yang sama menyerupai sajian 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 bab Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Copy code dibawah ini lalu 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 sajian 1"><span>Menu 1</span></a></li>
<li><a href="URL/alamat sajian 2"><span>Menu 2</span></a></li>
<li><a href="URL/alamat sajian 3"><span>Menu 3</span></a></li>
<li><a href="URL/alamat sajian 4"><span>Menu 4</span></a></li>

<li><a href="URL/alamat sajian 5"><span>Menu 5</span></a></li>
<li><a href="URL/alamat sajian 6"><span>Menu 6</span></a></li>
<li><a href="URL/alamat sajian 7"><span>Menu 7</span></a></li></ul>
</div>
   
   1. Kode yang berwarna ungu, pink, merah dan kuning yaitu isyarat 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 sajian yang ingin ditampilkan,
   5. Kode berwarna kuning : URL/alamat sajian 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link sasaran dari menu. Ganti dengan URL dari sajian yang ingin anda tampilkan.
   6. Jika anda ingin menambah dengan beberapa sajian lainnya, terlebih dulu harus memahami isyarat yang harus ditambahkan
      
6. Setelah tanggapan pengeditan kode, klik tombol Simpan
7. Lihat blog anda

Selamat mecoba, biar bermanfaat .....

Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini