Membuat Tab View Pada Blogspot

Apa Fungsi Tab View ?
Sobat Blogger semua tentu tahu tantang Tab View. Jika belum maka gambar disamping merupakan salah satu contoh Tab View yang merupakan tutorial yang akan saya beri kepada sobat blogger semua !!! Jika anda masih bingung seperti apa Tab View ini, Silahkan lihat pada sidebar sebelah kanan blog saya, Sidebar :: Information :: tersebutlah salah satu contoh Tab View yang terpasang pada blog saya saat ini !!!

Lalu apa fungsi dari Tab View ini ? Selain menu yang berada pada menu blog kita, tab view juga merupakan salah satu solusi bagaimana seseorang blogger yang mengunjungi blog kita akan mudah memperoleh banyak informasi di blog kita !!! Selain itu, Tab View dapat memperhemat lokasi baik pada bagian sidebar blog kita untuk memberikan lebih banyak lagi informasi kepada pengujung blog kita !!!

Bagaimana Cara Membuatnya ?
Ok, Jika Tidak mau pikir panjang, ayo dan simak pembuatannya di bawah ini !!!
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada Expand Widget Templates.
 
3. Copy kode CSS dibawah ini,

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}

Note : Pada tulisan berwarna merah silahkan anda rubah dan sesuaikan dengan blog anda, untuk kode warna bisa dilihat di Kode Warna HTML
4.  Setelah itu, Paste kode tersebut diatas kode ]]>

5. Copy kode Di bawah ini :
6. Paste Kode tersebut diatas kode

7. Setelah itu,

• Simpan template anda.
• Kemudian pilih tab Elemen Halaman --> Tambah Gadget --> HTML/JavaScript 

8. Copy dan Paste Kode dibawah ini :

350px;">
Tab 1
Tab 2
Tab 3

350px; 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:
- Text yang berwarna Biru  adalah ukuran tinggi dan lebar tabview. (Silahkan anda sesuaikan dengan blog anda)
- Kode yang berwarna Hijau yang muncul di Menu utama (Menu Atas).
- Kode yang berwarna Kuning adalah isi dari Tab View. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

9. Lalu Klik Simpan, dan lihat blog kamu sekarang !!!


" SELAMAT BERKREASI SOBAT