Cara Menciptakan Tab View Di Blog

Apa itu Tab View? Tab View ialah sebuah widget yang berbentuk tabel mengelompokkan halaman sesuai dengan hidangan 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 teladan 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 hidangan tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi hidangan tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi hidangan tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

4. Simpan Template

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

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

Berbagi :