Menu tab view ini sangat berguna sekali untuk menghemat tempat di sidebar dan dapat memasukan link atau gambar ke dalam menu ini, karena ukurannya yang kecil sehingga dapat mempermudah kita dalam menghemat ruangan di sidebar, tertarik untuk membuatnya???? Sebelumnya backup dulu template sobat untuk mencegah hal-hal yang dapat merusak template jadi berantakan. Langsung saja kita mulai langkah demi langkah pembuatannya
1. Login ke blogger
2. Pilih Rancangan/tata letak
3. Klik edit HTML
4. Centang Expand Template Widget
5. Cari kode (untuk pencarian cepat tekan ctrl + f)
6. Copy kode di bawah ini, dan letakan diatas kode
7. Kemudian Cari kode ]]>
8. Dan letakkan kode berikut di atas kode ]]>
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna 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;
}
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna 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;
}
9. Kemudian simpan template
10. Langkah berikutnya klik rancangan/tata letak
11. klik tambah gatget
12. Pilih HTML JavaScript, dan copy/paste kode di bawah ini kedalamnya
13. Terakhir simpan... sobat tinggal memasukan judul dan isi sesuai dengan keinginan
Catatan :
contohnya dengan memasukan link...
Source : http://adibey.blogspot.com/2010/08/cara-membuat-menu-tab-view.html#ixzz1XpwqPqhQ