Tabview Widget merupakan cara mudah untuk memberikan
informasi pada halaman multiple, Tabview Widget sangat cocok digunakan pada ruang
terbatas karena satu tab dalam tabview akan mewakili satu halaman. Penggunaan
Tabview Widget pada blogger pernah di populerkan oleh
Hoctro dengan menggunakan bantuan dari
Yahoo! UI
Library setelah mencobanya, jujur.. saya kurang menyukainya, mungkin karena waktu
loading yang begitu lama ditambah proses pemasangannya yang terbilang ribet.
Karena kurang puas dengan widget sebelumnya, saya mencoba membuat Tabview Widget sederhana yang mudah
diaplikasikan, widget ini support buat blogger, website dan platform lainya,
Coding yang digunakan mengusung pada penggunaan Html Form, CSS dan Javascript.
Mengenai Support tidaknya di browser, jangan khawatir saya sudah mencobanya di
Opera v9.00, Internet Explorer v6.0, Firefox v2.0.0.14 dan
Flock v1.0.8 semua berjalan dengan baik. Lihat display sample Tabview
dibawah:
Diatas merupakan contoh Tabview widget sederhana, pada Tabview anda bisa
mengubah warna, menambahkan jumlah tab dan mengubah sendiri ukuran dari tabview
sesuai dengan kebutuhan. Agar lebih mudah saya akan menjelaskannya cara
menggunakannya.
Pertama Copy-Paste semua kode dibawah ini ke tools edittor (misalkan Notepad,
MS FrontPage)
<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
Tab1
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab2
Tab2
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab3
Tab3
</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>
Langkah selanjutnya anda belajar cara memasang kode pada tiap Tabview,
selengkapnya silahkan baca caranya dibawah:
Cara memasukan kode dalam Tabview:
Lihat contoh Tab1 Tab2 Tab3 dibawah, ini
merupakan tempat dimana halaman akan ditampilkan. Silahkan masukan apa saja yang
ingin anda tampilkan (misalkan Adsense, Blogroll, Recent comment, Recent post,
Search box dan lain-lain)
<div class="Alas">
Tab1
Tab1
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab2
Tab2
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab3
Tab3
</div>
Gimana mengubah warna dan tampilan TabView?
Untuk mengubah tampilan jadi lebih menarik anda bisa mengubah warna
berdasarkan code CSS dibawah ini. Code dengan warna merah
kode yang bisa anda modifikasi. (jika anda sudah mengerti Code CSS tentu anda
bisa membuatnya lebih menarik lagi)
<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>
Gimana menambah jumlah Tabview, mengubah ukurannya dan menganti tulisan di
tiap Tabview?
Untuk mengubah jumlah tabview caranya sangat mudah tinggal anda pelajari pada
kode warna merah yang telah saya tambahkan.
Selanjutnya untuk mengubah ukuran tab anda bisa mengedit sesuai dengan warna
kuning dan
untuk mengganti judul tab1 tab2 tab 3 tinggal mengubah sesuai contoh
warna pink dibawah:
<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>
<a>Tab4</a></div>
<div class="Halamans" style="width: 330px;
height: 250px;">
<div class="Halaman">
<div class="Alas">
Tab1
Tab1
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab2
Tab2
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab3
Tab3
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab4
Tab4
</div>
</div>
</div>
</div>
</form>
Gimana cara pasang di Blogger?
Kode yang telah anda modifikasi bisa langsung digunakan, caranya tinggal
Copy-Paste aja langsung semua kodenya ke Element halaman Blogger :)
Perhatian : saya membolehkan anda
menggunakan kode javasrcipt tabview widget asal jangan mengedit alamat
pembuatnya. Thanks
Selamat mencoba, happy blogging with o-om.com
