Membuat Widget Tab View di Blogspot

Tab View adalah sebuah tampilan widget yang didalamnya berisi beberapa menu yang berbeda. Memasang widget ini dimaksudkan supaya tidak menghabiskan tempat pada template Blog.

Berikuta cara Menempatkannya

• Pertama
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: ]]></b:skin>
- Lalu copy Script berikut dan letakkan diatas kode: ]]></b:skin>

/* Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* lebar menu */
text-align: center;
height: 24px; /* tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antar menu */
vertical-align: middle;
border: 1px solid #2E2E2E; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #D8D8D8; /* warna latar menu */
color: #000000; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

div.TabView div.Tabs a.Active {
background-color: #A4A4A4; /* warna background menu aktif */
color: #000000;
}

div.TabView div.Tabs a:hover {
background-color: #FFFFFF; /* warna background menu hover */
color: #151515;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #2E2E2E; /* warna border kotak utama */
overflow: hidden;
background-color: #D8D8D8; /* 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 */
}

• Kedua
- Letakkan kode berikut dibawah kode ]]></b:skin>

<script src="http://archive69.googlecode.com/files/tabview.js" type="text/javascript"/>

- Lalu Simpan Template.

• Ketiga

- Klik Rancangan. Di Elemen Laman, Pilih Tambah Gadget
- Pilih HTML/javascript dan Copy Paste kode di bawah ini:

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

<!--Awal Tab 1-->
<div class="Page"><div class="Pad">
Isi TAb 1.1<br/>
Isi Tab 1.2<br/>
Isi TAb 1.dst<br/>
</div></div>
<!--Akhir Tab 1-->

<!--Awal Tab 2-->
<div class="Page"><div class="Pad">
Isi Tab 2.1<br/>
Isi Tab 2.2<br/>
Isi Tab 2.dst<br/>
</div></div>
<!--Akhir Tab 2-->

<!--Awal Tab 3-->
<div class="Page"><div class="Pad">
Isi Tab 3.1<br/>
Isi Tab 3.2<br/>
Isi TAb 3.dst<br/>
</div></div>
<!--Akhir Tab 3-->

</div></div></form>

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

- Terakhir simpan

Selesai

Catatan
Untuk ukuran dan warna bisa disesuaikan dengan template kita
Ganti dan isi tulisan yang warna orange