Cara Mudah Membuat Tab view Lebih Dari satu Tanpa Edit Html

Membuat tab view atau tabview lebih dari satu di blogspot atau blogger, apa lagi tanpa edit html memiliki banyak kelebihan. Diantara kelebihan tersebut adalah efisiensi space blog dan tidak perlu edit html tentu saja.

Cara membuat Tab view (tabview) langsung di sidebar yang disajikan Materi dakwah Islam dan Kultum ini memang tanpa melalui jalan edit html, tetapi langsung masuk ke tambah gadget html/javascript.

Namun, bila tidak tahu caranya akan sedikit mengalami kesulitan. Bisa-bisa tabview yang kedua, ketiga dan atau yang seterusnya tidak berfungsi.

Berikut ini adalah cara baru dan mudah membuat tabview lebih dari satu. Ikuti langkah-langkahnya :
1. Login ke blogger tentu saja
2. Klik menu “Rancangan”
3. Pada “Elemen Laman”, tambah gadget “Html/Javascript”
4. Kopi dan paste script dibawah.


Tabview Pertama

<style type="text/css">
div.TabView div.Tabs
{height: 40px;overflow: hidden}

div.TabView div.Tabs a {float:left; display:block; width: 97px;/* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding: 8px 0 2px 0; vertical-align:middle; border:1px solid #990136; margin: 10px 1px 0 0; background-color:#0400FF; /* 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:2px; -moz-border-radius-topright:2px}

div.TabView div.Tabs a:hover { background-color: #0193B7; color:#0011FF; /* Warna background Menu Utama hover */ }

div.TabView div.Tabs a.Active {background-color: #990136; color:#F2FF02;/* Warna background Menu Utama Aktif */ }

div.TabView div.Pages {clear:both; border:1px solid #990136; border-top:7px solid #990136;/* Warna border Kotak Utama */ overflow:hidden; background-color: #E0FFBC; color: #ff0000/* 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-top: 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>Menu1</a>
<a> Menu2</a>
<a> Menu3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">

ISI MENU 1

</div>
</div>
<div class="Page">
<div class="Pad">

ISI MENU 2

</div>
</div>
<div class="Page">
<div class="Pad">

ISI MENU 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Tabview kedua

<style type="text/css">
div.TabView2 div.Tabs
{height: 40px;overflow: hidden}

div.TabView2 div.Tabs a {float:left; display:block; width: 95px;/* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding: 8px 0 2px 0; vertical-align : middle; border:1px solid #990136; margin: 10px 2px 0 0px; background-color:#0400FF; /* 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:2px; -moz-border-radius-topright:2px}

div.TabView2 div.Tabs a:hover { background-color: #0193B7; color:#0011FF; /* Warna background Menu Utama hover */ }

div.TabView2 div.Tabs a.Active {background-color: #990136; color:#F2FF02;/* Warna background Menu Utama Atas */ }

div.TabView2 div.Pages {clear:both; border:1px solid #990136; border-top:7px solid #990136;/* Warna border Kotak Utama */ overflow:hidden; background-color: #1F3F3B; color: red/* Warna background Kotak Utama */ }
div.TabView2 div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView2 div.Pages div.Page div.Pad {padding-top: 5px;}
</style>

<script type='text/javascript'>
//<![CDATA[
function tabview2_aux(TabView2Id, id)
{
var TabView2 = document.getElementById(TabView2Id);

// ----- Tabs -----

var Tabs = TabView2.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview2_switch('"+TabView2Id+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView2.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 tabview2_switch(TabView2Id, id) { tabview2_aux(TabView2Id, id); }

function tabview2_initialize(TabView2Id) { tabview2_aux(TabView2Id, 1); }
//]]>
</script>
<form action="tabview2.html" method="get">
<div id="TabView2" class="TabView2">
<div style="width: 300px;" class="Tabs">
<a>Menu1</a>
<a> Menu2</a>
<a> Menu3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">

ISI MENU 1

</div>
</div>
<div class="Page">
<div class="Pad">

ISI MENU 2

</div>
</div>
<div class="Page">
<div class="Pad">

ISI MENU 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView2');
</script>

Catatan :
. : : kode berwarna merah silahkam edit sesuai selera
. : : Kode berwarna biru silahkan tuliskan menu dan isi menu yang diinginkan

Tambahan
Kita bisa memasang tabview hingga tiga, empat atau bahkan lima kalau memang diperlukan. Kuncinya hanya pada kata “TabView”. Berikan identitas tambahan dengan angka (misalnya 2). Untuk tabview kedua beri tambahan angka “2” sehingga menjadi tabview2. Demikian seterusnya, bila tabview kelima beri tambahan identitas angka “5” sehingga menjadi tabview5. perhatikan pada tabview 2!!!

Semoga bermanfaat