Membuat atau Memasang Tab View dengan Mudah
Tab view berfungsi untuk menghemat ruang atau halaman blog. Bila kita memiliki gadget di sidebar yang cukup banyak dan terlihat memanjang, maka dengan memasang tab view, gadget-gadget tersebut akan tersusun sejajar, sehingga tidak akan terlihat memanjang.
Pemasangan tab view pada blog ini, saya coba sajikan dengan teknik CSS yang cukup mudah. Hanya membutuhkan gadget HTML/JavaScript pada sidebar, header, ataupun footer blog kawan. Teknik ini pun bisa kita pasang pada gadget HTML/JavaScript yang telah ada, seperti yang pernah saya tulis di Tips Menghemat Gadget.
Langkah membuat atau memasang tab view, yaitu:
Pemasangan tab view pada blog ini, saya coba sajikan dengan teknik CSS yang cukup mudah. Hanya membutuhkan gadget HTML/JavaScript pada sidebar, header, ataupun footer blog kawan. Teknik ini pun bisa kita pasang pada gadget HTML/JavaScript yang telah ada, seperti yang pernah saya tulis di Tips Menghemat Gadget.
Langkah membuat atau memasang tab view, yaitu:
- Copy paste kode berikut
<style>
.TabView .Tabs { overflow: hidden; }
.Tabs a { float: left; text-align: center; padding: 5px 3px; text-decoration: none; border-bottom: none; }
.Tabs a:hover, .Tabs a.Active { background: #fceabb; text-decoration: none; font-weight: bold; -moz-border-radius: 9px 9px 0 0; border-radius: 9px 9px 0 0; }
.Pages { overflow: hidden; height: 535px; width: 100%; }
.Page { background: #fceabb; padding: 10px 8px 8px 10px; }
</style>
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/tabview.js" type="text/javascript"></script>
<div id="TabView" class="TabView">
<div class="Tabs" >
<a>Tab view 1</a>
<a>Tab view 2</a>
<a>Tab view 3</a>
</div>
<div class="Pages">
<div class="Page">
Isi Tab view 1
</div>
<div class="Page">
Isi Tab view 2
</div>
<div class="Page">
Isi Tab view 3
</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView');</script>
- Ganti Tab view 1, Tab view 2, dan Tab view 3 dengan judul gadget
- Ganti Isi Tab view 1, Isi Tab view 2, dan Isi Tab view 3 dengan kode-kode script atau HTML yang menjadi isi gadget.
- Bila berhasil, akan terlihat seperti gambar dibawah ini dan telah diterapkan pada sidebar blog yang kawan baca sekarang
Dulu pernah memakai ini sob tapi sekarang sudah tak lepas lagi soalnya mau belajar meminimalisir javascript(kalau bisa) biar loadnya lebih ringan. hehehe
BalasHapusemang jadi bikin load lebih berat ya?
BalasHapus@ Juan Dimas Susanto: Kalo Memasang Tab View disini sampe bikin blog berat mah, dari dulu dah saya buang, kaliii :h:
BalasHapus