Modifikasi Tab View dengan variasi background

Tab View ini merupakan tambahan dari posting Cara mudah membuat TAB VIEW WIDGET dengan penambahan berupa variasi background baik pada menu maupun kota utama.

Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Tab View */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: right;
display: block;
width: 100px; /* ukuran lebar menu */
text-align: center;
height: -24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #6E6E6E; /* warna border menu */
border-bottom-width: 1px solid #6E6E6E;;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/DeepSea.gif) repeat scroll 0 0; /* warna latar menu */
color: #FAAC58; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:2px;
}
div.TabView div.Tabs a.Active {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/Golden.gif) repeat scroll 0 0; /* warna background menu aktif */
color: #66B5FF;
}
div.TabView div.Tabs a:hover {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/YellowContrast.gif) repeat scroll 0 0; /* warna background menu hover */
color: #B45F04;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #6E6E6E; /* warna border kotak utama */
overflow: hidden;
background: transparent url("http://lh4.ggpht.com/_wC8_9aR_6uE/Swl_FKbmLPI/AAAAAAAABxI/yoohAxlj0Q8/s640/columns_dark.jpg"); /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.
  • warna merah, URL Image background ( disesuaikan dengan warna dan tema blog silakan diganti dengan image yang sesuai.
  • warna orange, kode warna background ( disesuaikan dengan warna dan tema blog silakan diganti dengan warna yang sesuai. ( dapatkan kode warna disini )
  • warna hijau,  ukuran untuk menu utama ( bentuk ujung lengkung / kotak, makin besar angka makin lengkung )

Langkah Kedua 
Selamat Mencoba...!! 
Labels: ,