Membuat Tabview Widget Blog

Tabview sebenarnya hampir sama dengan daftar isi scroll, bedanya tabview mempunyai kelebihan yaitu tabmenu , sehingga daftar isi tabview tidak hanya berisikan satu kategori namun bisa lebih dari 2, Selain di gunakan sebagai tempat penampung daftar isi postingan, tabview juga bisa di isi dengan gambar, text, link, banner, widget followers dan lain sebagainya.

Untuk membuat widget tab view pada blog anda silahkan ikuti langkah berikut :

- Login 'Dasbor'

- Rancangan 'Elemen Laman'

- Edit HTML Sebelum melakukan pengeditan pada template ada baiknya di backup terlebih dahulu,

- Centang pada Expand Widget

- Cari lah kode ]]></b:skin> untuk memudahkan pencarian tekan Ctrl + F, Jika sudah ketemu, Copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}

div.TabView div.Tabs
{
height: 24px;
overflow: auto;
}

div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 30px; padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif; font-weight: 900;
color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF; border: 1px solid #000000; overflow: auto;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: auto;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


}

Tinggi, lebar, warna, border bisa di ubah sesuaikan pada script di atas.
Next, cari kode </head> jika sudah ketemu copy script di bawah ini lalu paste tepat di atas kode </head>

<script type='text/javascript'>

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>

Langkah terakhir, tambahkan script di bawah ini pada HTML / JavaScript di blog anda :

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 200px;">

<a>Tab 1</a>

<a>Tab 2</a>

</div>

<div class="Pages" style="width: 300px; height: 250px;">



<div class="Page">

<div class="Pad">



TAMBAHKAN TEXT, LINK, GAMBAR DLL DISINI



</div>

</div>



<div class="Page">

<div class="Pad">



TAMBAHKAN TEXT, LINK, GAMBAR DLL DISINI



</div>

</div>



</div>

</div>

</form>



<script type="text/javascript">

tabview_initialize('TabView');

</script>

Selesai, save lalu lihatlah perubahan.
Jika anda ingin menambahkan Tabmenu nya tinggal menambahkan script <a>Tab 3</a>
<div class="Page">
<div class="Pad">

ISI 

</div> </div>