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 :
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 :
- Masuk ke Blogger
- Pilih Rancangan bagian Elemen Halaman
- Klik Tambah Gadget
- Pilih HTML/Javascript
- 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>
- Kode yang berwarna ungu, pink, merah dan kuning adalah kode yang harus anda ganti
- Kode berwarna ungu :
https://lh4.googleusercontent.com/_1j80TgNqd_8/TbBDFXW2ZGI/AAAAAAAACmw/XYI1ea8q9WM/tableftJ.gifmerupakan alamat gambar latar 1, ganti alamat gambar tesebut dengan gambar milik anda. Ini tampilannya :
- Kode berwarna pink :
https://lh5.googleusercontent.com/_1j80TgNqd_8/TbBDFlXCWPI/AAAAAAAACm0/2TX8nvw48S4/tabrightJ.gifmerupakan alamat gambar latar 2, ganti dengan gambar milik anda. Ini tampilannya :
- Kode berwarna merah :
Menu 1, 2, 3, 4, 5, 6 dan 7merupakan menu/label dari blog anda. Ganti dengan menu yang ingin ditampilkan, - Kode berwarna kuning :
URL/alamat menu 1, 2, 3, 4, 5, 6 dan 7merupakan URL/alamat link target dari menu. Ganti dengan URL dari menu yang ingin anda tampilkan. - Jika anda ingin menambah dengan beberapa menu lainnya, terlebih dulu harus memahami kode yang harus ditambahkan
- Setelah selesai pengeditan kode, klik tombol Simpan
- Lihat blog anda
0 komentar
Posting Komentar