Cara pasang "OOM TabView Widget"

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:

Twitter Blogroll Recent Post

Contoh Tabview untuk Twitter:

Follow me on Twitter

Contoh Tabview untuk Blogroll:

• Free-7.net
• Ellyasa.blogspot.com
• Kangrohman.com
• Info-baru.com

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

Dengan memasukan alamat email dibawah ini berarti anda akan mendapat kiriman artikel terbaru dari o-om.com di inbox anda:

Beri vote untuk nilai artikel ini: