Membuat Tabview Widget

Tabview merupakan sebuah widget yang perlu digunakan untuk menyimpan beberapa konten dalam satu tempat, yang akan ditampilkan bilamana tab konten tersebut di klik olehnya.

Dalam pembuatan widget seperti ini banyak digunakan beberapa kode diantaranya berektensi Java Script.

Cara membuat TabView :
1. Masuk kedalam blogger sobat

2. Arahkan ke Tab "TATA LETAK/LAYOUT" ==> "EDIT HTML" ==> Beri tanda pada kotak disamping tulisan "Expand Widget Templates"

3. Jangan lupa untuk BackUp template sobat sebelumnya dengan menekan tulisan "Download Full Templates"

4. Cari Kode ]]></b:skin> kemudian Copy dan Pastekan Kode Berikut tepat diatas Kode ]]></b:skin>

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

5. Setelah itu Copy dan Paste Kode Berikut tepat dibawah kode ]]></b:skin>

<script src='http://anas.ku93.googlepages.com/tabview.js' type='text/javascript'/>

6. Simpan Template Sobat.

Cara memasang Tabview Pada Widget/Sidebar
1. Tuju Halaman TATA LETAK/LAYOUT" ==> "PAGE ELEMENT" ==> "TAMBAH WIDGET"

2. Pilih HTML/Java Script"

3. Masukan Kode berikut ini :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Tab.1</a>
<a>Tab.2</a>
<a>Tab.3</a>

<a>Tab.4</a>

</div>
<div style="width: 100%; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">

Isi Konten Tab.1

</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.2
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.3
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.4
</div>
</div>

</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Pada kode yang Berkedip merupakan Jumlah Tab yang mau sobat masukan, terserah sobat mau membuat berapa Tab. Tinggal sobat menambahkan Kode yang sama seperti kode yang Berkedip.

- Pada Kode yang berwarna Kuning merupakan Tinggi Kotak Widget TabView yang akan sobat buat.

- Pada Text berwarna Merah merupakan Isi Konten yang akan di tampilkan pada masing-masing TabView.

Demikian cara membuat Widget TabView,Semoga dapat difahami. Selamat mencoba.