Cara Membuat Tab View di Blog

Apa itu Tab View? Tab View adalah sebuah widget yang berbentuk tabel mengelompokkan halaman sesuai dengan menu tabel di atasnya. Cara ini sangat efektif untuk menghemat halaman Blog, dan merupakan fitur yang sangat cantik. Cocok untuk Blogger yang suka bereksperimen dan tampil beda dari Blog lainnya.

Lihat contoh tampilan Tab View di bawah ini:

Bagaimana cara membuatnya?

Cara Membuat Tab View di Blog:

1. Login di Blogger
2. Pilih Tata Letak >> Tambah Gadget >> pilih HTML/ Java Script
3. Copy-paste script berikut ini:



<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px;

/* Lebar Menu Utama Atas */
text-align:center ; height: 26px;

/* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #014B84;

/* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial;

/* Font Menu Utama Atas */
font-weight:bold; color:#fff;

/* 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-color: #012D52;

/* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #014B84;

/* Warna border Kotak Utama */
overflow:hidden; background-color:#012D52;

/* 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: 5px 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 id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Title 1</a>
<a>Title 2</a>
<a>Title 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">

Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

4. Simpan Template

Catatan:
Ganti tulisan berwarna Biru dengan Nama Label yang diinginkan
Ganti tulisan berwana Hijau dengan isi Tab View yang diinginkan (bisa berupa link atau gambar)

Itu saja sekilas pemahaman saya tentang Cara Membuat Tab View di Blog. Semoga bermanfaat. Jika mencari artikel lain silahkan cek di bawah ini:

Artikel Terkait

Cara Membuat Tab View di Blog

4/ 5

Oleh Bonita Benz