Kemarin waktu browsing saya mendapatkan sebuah tool/trik/script baru dari blog ini yang bisa mempercantik tampilan dari blog kita, yaitu Tab View. Dengan menggunakan tab view kita bisa meringkas widget-widget kita sehingga dapat memberikan space/ruang kosong baru yang bisa kita gunakan untuk keperluan lain.
Nah ternyata mudah sekali pembuatannya, silahkan tambahkan widget baru (Javascript/HTML) lalu isikan kode dibawah 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: #77d0ee; }div.TabTampil div.Halamans{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}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 #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;display: block; width: 104px; 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 id="TabTampil" class="TabTampil">
<div style="width: 318px;" class="TTs">
<a>Tab 1 Name </a> <a>Tab 2 Name</a> <a>Tab 3 Name</a>
</div>
<div style="width: 316px; height: 200px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<a href="http://quickbond.blogspot.com/search/label/SEO/">SEO</a>
<a href="http://quickbond.blogspot.com/search/label/Tips Trik/">Tips Trik</a>
<a href="http://quickbond.blogspot.com/search/label/Ngeblog/">NgeBlog</a>
<a href="http://quickbond.blogspot.com/search/label/Pemrograman/">Pemrograman</a>
</div>
</div>
<div class="Halaman">
<div class="Alas">Silahkan isi disini...<br>Bisa javascript/HTML</div>
</div>
<div class="Halaman">
<div class="Alas">Silahkan isi disini...<br>Bisa javascript/HTML</div>
</div>
</div>
</div>
</form>
<script style="text/javascript" src="http://meichelina.googlepages.com/newscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
Keterangan:
1. Kode yang berwarna merah adalah kode CSS untuk pengaturan tampilan
2. Kode yang berwarna hitam adalah kode HTML untuk menampilkan tab-tabnya
3. Kode yang berwarna hijau adalah kode javascript yang diambil dari sumber lain, bisa dilihat alamat urlnya
4. Silahkan diganti judul tabnya pada bagian "Tab 1 Name", "Tab 2 Name", dan "Tab 3 Name" diatas atau jika ingin ditambahkan juga bisa.
5. Untuk pengisiannya silahkan diisi dibagian antara:
<div class="Alas">
dan
</div>
pada kode yang berwarna hitam secara urut sesuai nama/judul tabnya. Sebagai gambaran, saya mempunyai 3 tab name, oleh sebab itu saya juga membuat tag <div> sebanyak 3.
6. Sekian, semoga bermanfaat.
