Cara membuat tab view sederhana

Cara membuat tab view sederhana - Tab View berfungsi sebagai tabel pemisah kategori , tulisan atau lainnya dalam satu artikel yang sama. Dengan demikian pengunjung dapat memilih langsung opsi yang mereka tuju dengan meng-klik judul dari opsi tab tersebut dan dapat melewatkan opsi yang menurut pengunjung tidak perlu. Contohnya sebagai berikut.

Misalnya saya membuat artikel tentang download game dan disini saya menambah link download , screenshot dan keterangan dalam satu tabel namun dilihat secara terpisah.

Link Gambar Keterangan

Link Download ada disini

1. DOWNLOAD GAME
2. DOWNLOAD OBB
3. DOWNLOAD SAVE DATA

Keterangan Gambar

Nama : Game Android
Pengembang : Dev Game
Rilis : 2 Juli 20...
Ukuran : 100mb
Link : Google Dri... / MediaFi...

Selain sebagai contoh di atas, fungsi dari Tab View bisa kamu manfaatkan untuk berbagai kebutuhan lainnya, tergantung kamu ingin menggunakannya untuk apa.

Jika kamu membutuhkan nya , kamu bisa copy skrip dibawah ini dan kamu bisa langsung menempelkan nya pada postingan atau pada widget blog kamu.

<style type="text/css"> div.TabView div.Tabs {height: 30px; overflow: hidden;} div.TabView div.Tabs a { float: left; display:block; width: 30%; background: #666; color: #444; margin:0 0px 0 0; /* Lebar Menu Utama Atas */ text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */ padding-top:0px; vertical-align:middle; border:3px solid #999; border-radius:99em 99em 0 0; border-spacing:10px; /* Warna border Menu Atas */ border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas*/ font-weight:bold; color: #fff; text-shadow: 0px 0px 3px #000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px} div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background: linear-gradient(to left, #006400, #008000); border: 3px solid green; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear:both; border:3px solid green; border-radius: 0 0px 5px 5px; /* Warna border Kotak Utama */ overflow:hidden; background-color:#fff; padding: 0 10px 0 10px; /* Warna background Kotak Utama */ } div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden} div.TabView div.Pages div.Page div.Pad {padding: px 0 0 5px} </style> <script type="text/javascript"> //<![CDATA[ function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } //]]> </script><form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 100%;"><a href="#">Judul 1</a> <a href="#">Judul 2</a> <a href="#">Judul 3</a> </div><div class="Pages" style="height: 250px; width: 100%;"><div class="Page"><div class="Pad"><br />TULISAN 1 </div></div><div class="Page"><div class="Pad"><br />TULISAN 2 </div></div><div class="Page"><div class="Pad"><br />TULISAN 3 </div></div></div></div></form><script type="text/javascript"> tabview_initialize('TabView'); </script>

Kamu bisa mengubah warna menu , teks, tabel dan lainnya dengan mengubah skrip yang sudah saya kasih keterangan didalamnya.

Pada intinya Tab View ini bisa kita manfaatkan untuk menghemat ruang pada artikel yang terlalu panjang dan memberikan kebebasan pengunjung untuk melihat atau untuk tidak melihat konten yang tidak diperlukan dan ini sama halnya dengan menggunakan tombol spoiler tutup buka.

Demikian artikel saya kali ini, semoga postingan ini bermanfaat. Terimakasih.