Cara mudah membuat tab View

Tab View, dulu saya sering membuat widget ini, widget ini bisa menghemat tempat di blog kita, tapi saya kita harus utak atik code html blog kita, repot dan banyak waktu yang terbuang, dan kadangkala kita salah dalam mengeditnya maka rusaklah tema blog kita, nah untuk mengakali semua itu, saya cari saja cara baru buat tab view, yah dapet deh, dan sekarang saya akan post di blog saya ini dengan sedikit pengubahan.

Sebetulnya model dan bentuk tab viewnya sama, tapi pada bagian pemasanganya yang berbeda, kita tak perlu otak atik html lagi, kita hanya perlu mengikuti beberapa langkah dibawah ini,

Cara,

1. Masuk ke halaman dasbor anda,

2. Klik tata letak,

3. Klik Tambah Gadget,

4. Lalu pilih gadget Html/javaScript,

5. Lalu copy code dibawah ini, di kolom yang telah disediakan,

<style type="text/css">

div.TabView div.Tabs

{height: 30px;overflow: hidden}

div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */

text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */

padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */

border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */

font-weight:bold; color:#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-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>Judul 1</a>

<a>Judul 2</a>

<a>Judul 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>

Catatan,

Atur, tinggi, warna, bentung, agar sesuai dengan tema blog anda, atau sesuai dengan keinginan anda.

Sekian dari saya, sampai jumpa di tips dan trik blog selanjutnya,saya akan kumpulkan semua tips dan trik di dunia internet agar menjadi satu.[deawa]

Sumber html, miscah.blogspot.com