Tips Membuat Widget TabView 3 Kolom ( 2 )

Tabview Widget adalah suatu halaman informasi yang multiple, Tabview Widget cocok digunakan pada ruang yang terbatas, karena satu tab dalam tabview sudah dapat mewakili satu halaman. Penggunaan Tabview Widget yang di populerkan oleh Hoctro menggunakan bantuan dari Yahoo! UI Library, menurut Si-OOM sih waktu loading katanya begitu lama ditambah proses pemasangannya yang ribet. Dengan ini disini saya ingin sebagai penyambung lidah untuk mencoba menerapkan inspirasinya si-OOM yang sederhana, mudah di-aplikasikan, dan suport buat blogger, website dan platform lainya, Coding yang digunakan pada penggunaan Html Form, CSS dan Javascript. Sudah support dengan berbagai browser antara lain Opera, Internet Explorer, Firefox dan Flock sudah berjalan dengan baik. Contoh penggunaan Tabview seperti disebelah kanan.


Langsung saja penerapannya seperti berikut :

1. Login Blogger

2. Layout --> Page Elements --> Add a Widget --> HTML/JavaScript

3. Lalu Copy script dibawah ini dan pastekan ke widget ( Tapi sebelumnya di edit dahulu, bisa dengan MS-FrontPage dll).

<style type="text/css">

div.TabTampil div.TTs

{height: 24px; overflow: hidden; }

div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active

{ background-color: #FFE16C; }

div.TabTampil div.Halamans

{ clear: both; border: 1px solid #FFCC00; overflow: hidden; background-color:
#FFFFB7;}

div.TabTampil div.Halamans div.Halaman

{ height: 100%; padding: 0px; overflow: hidden; }

div.TabTampil div.Halamans div.Halaman div.Alas

{ padding: 3px 5px; }

div.TabTampil div.TTs a

{ border-left:1px solid #FFCC00; border-right:1px solid #FFCC00; border-top:1px
solid #FFCC00; border-bottom:0px solid #FFCC00; float: left;

display: block; width: 100px; text-align: center; height: 24px; padding-top:
3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;

font-size: 12px; font-weight: 900; color: #222}

</style>





<form action="tabtampil.html" method="get">

<div class="TabTampil" id="TabTampil">

<div class="TTs" style="width: 330px;"> <a>Tab1</a> <a>Tab2</a> <a>Tab3</a>
</div>

<div class="Halamans" style="width: 330px; height: 250px;">

<div class="Halaman">

<div class="Alas">

Tab1.1

Tab1.2

</div>

</div>

<div class="Halaman">

<div class="Alas">

Tab2.1

Tab2.2

</div>

</div>

<div class="Halaman">

<div class="Alas">

Tab3.1

Tab3.2

</div>

</div>

</div>

</div>

</form>



<script style="text/javascript" src="http://oom.blog.googlepages.com/o-omdotcom_tabview.js"></script>

<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Catatan :

<div class="Alas">

Tab1.1

Tab1.2

</div>

</div>

<div class="Halaman">

<div class="Alas">

Tab2.1

Tab2.2

</div>

</div>

<div class="Halaman">

<div class="Alas">

Tab3.1

Tab3.2

</div>

Text warna merah diatas dapat diganti dengan image, link atau script dll ( misal : recent post, new post, comment dst ) sesuai dengan selera anda.

4. Kalau dirasa cukup, baru pastekan ke widget dan lihat hasilnya.

Source : Guru Besar OOM, Hoctro, Yahoo! UI Library