Sekarang kita mulai trik blogger membuat sub tab view, namun sebelumnya blog kamu harus sudah terinstall tab view :
- Login dulu ke account blogger kamu.
- Pilih tab Tata Letak --> Edit HTML.
- Cari kode CSS Tab View.
- Tambahkan kode berikut tepat di bawah kode CSS Tab View.
div.TabView div.Pages div.Page div.Pad div.pad2 { padding: 3px 5px 0 20px; }
- Simpan template kamu.
- Kemudian pilih tab Elemen Halaman --> Klik widget/gadget "tab view" (atau nama apapun yang kamu berikan sebelumnya).
- Kodenya lebih kurang seperti ini.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages">
<ul>
<li>Tab1.1</li>
<li>Tab1.3</li>
</ul>
<div class="Page">
<div class="Pad">
Tab2.1<br />
Tab2.2<br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab3.1<br />
Tab3.2<br />
Tab3.3<br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Catatan :<div class="TabView" id="TabView">
<div class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages">
<ul>
<li>Tab1.1</li>
<div class="pad2">
Sub Tab 1.1.2<br />
<ul>
<li>Sub Tab 1.1.2</li>
</ul>
Sub Tab 1.1.3<br />
</div>
<li>Tab1.2</li><li>Tab1.3</li>
</ul>
<div class="Page">
<div class="Pad">
Tab2.1<br />
Tab2.2<br />
<div class="pad2">
Sub Tab 2.2.1<br />
Sub Tab 2.2.2<br />
Sub Tab 2.2.3<br />
</div>
Tab2.3<br /></div>
</div>
<div class="Page">
<div class="Pad">
Tab3.1<br />
Tab3.2<br />
Tab3.3<br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Kode di atas sudah ditambahkan kode sisipan sub tab view yang ditandai dengan warna merah.
- Sekarang lihat blog kamu.
Selamat membuat sub tab view ...