Cara Membuat Menu Tab View dengan Java Script di Blog

Apa sih tab view itu ?

Tab view adalah suatu widget yang berisi beberapa widget yang terdiri dari beberapa slot yang dapat di isi sesuai keinginan sang author blog misalnya Daftar isi blog.

Apa keuntungan memasang tab view ini di blog?

Keuntungan kalau kita memasang tabview di blog adalah blog semakin rapi dan space sidebar kita semakin banyak dan gak berantakan karena sudah terhemat oleh tab view yang dapat di isi dengan beberapa widget sesuai keinginan author blognya sendiri.

Apa kekurangan tab view dengan java script ini?

Mungkin kekurangannya loading page blog kita akan sedikit bertambah sehingga menjadi agak berat dan walaupun masih bisa di edit sesuka hati namun tampilannya masih sangat simple tidak seperti tab view dengan jquery.

Gimana sih cara memasang tab view dengan java script ini?

Baiklah ikuti langkah berikut ini ;

- Login dulu ke blogger

- masuk tata letak

- tambah gadget

-pilih html/javascript

- paste code dibawah 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 #555555; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */ }

div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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>

 

Jika sudah di paste klik simpan, kemudian preview blog teman-teman

*diatas sudah ada keterangan untuk mengedit sebebas-bebasnya dan kembangkan tabviewnya secara bebas.

Contohnya bisa dilihat di blog saya ini.

Artikel Terkait :

Bagikan :