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
