Menu Tab View Widget

Karena kurang puas dengan widget sebelumnya, yaitu tentang Cara Membuat Menu Tab View 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 Widget ini sobat bisa mengubah warna, menambahkan jumlah tab dan mengubah sendiri ukuran dari tabview sesuai dengan kebutuhan sobat. Cara pemasangannyapun simpel tinggal copy paste ke kotak Elemen HTML/Javascript. OK Kita langsung aja ke pembahasan.

1. Seperti biasa Log In ke Blog sobat
2. Setelah login ke dasbor
3. Pergi ke Tataletak (Rancangan)
4. Tambah Gadget (HTML/Javascript)
5. Setelah itu masukan kode di bawah ini:

<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="https://sites.google.com/site/efekefek/file-js/widget_tabview.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Langkah selanjutnya sobat 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 sobat 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 sobat bisa mengubah warna berdasarkan code CSS dibawah ini ( untuk kode warna klik disini ). Code dengan warna merah kode yang bisa sobat modifikasi. (jika sobat sudah mengerti Code CSS tentusobat 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 sobat pelajari pada kode warna merah yang telah saya tambahkan. Selanjutnya untuk mengubah ukuran tab sobat 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>

Setelah langkah langkah dan modifikasi selesai, sobat tinggal klik Tombol Simpan. Selesai

Selamat mencoba semoga berhasil dan bermanfaat.