Membuat
menu dengan tab view memerlukan kode HTML yang lumayan panjang dan
agak ribet, jadi sebaiknya simak baik-baik tutorial ini dan yang paling
penting jangan lupa untuk backup template andaterlebih dahulu.
Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan anda sesuaikan sendiri dengan isi dari menu yang anda gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Baiklah, sekarang kita menuju pada pokok permasalahan
- Pertama tentunya harus login dulu ke Blogger dengan akun anda.
- Tuju Tata Letak.
- Klik Edit HTML.
- Jangan lupa backup template ansa terlebih dahulu dengan mengklik Download Template Lengkap.
- Kemudian letakkan kode javascript berikut sebelum 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;
}
300px
; height: 250px;"> Tab 1.1
Tab 1.2
Tab 1.3
Tab 2.1
Tab 2.2
Tab 2.3
Tab 3.1
Tab 3.2
Tab 3.3
Keterangan :
- Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan anda sesuaikan dengan isi.
- Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
- Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.
Sumber: Maskolis
Membuat Widget Tab View di Blogspot
Posted by Admin
Membuat
menu dengan tab view memerlukan kode HTML yang lumayan panjang dan
agak ribet, jadi sebaiknya simak baik-baik tutorial ini dan yang paling
penting jangan lupa untuk backup template andaterlebih dahulu.
Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan anda sesuaikan sendiri dengan isi dari menu yang anda gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Baiklah, sekarang kita menuju pada pokok permasalahan
- Pertama tentunya harus login dulu ke Blogger dengan akun anda.
- Tuju Tata Letak.
- Klik Edit HTML.
- Jangan lupa backup template ansa terlebih dahulu dengan mengklik Download Template Lengkap.
- Kemudian letakkan kode javascript berikut sebelum 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;
}
300px
; height: 250px;"> Tab 1.1
Tab 1.2
Tab 1.3
Tab 2.1
Tab 2.2
Tab 2.3
Tab 3.1
Tab 3.2
Tab 3.3
Keterangan :
- Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan anda sesuaikan dengan isi.
- Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
- Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.
Sumber: Maskolis