MEMBUAT TABVIEW WIDGET BLOG

Postingan ini adalah sebuah request dari seorang sobat saya yang waktu itu merequest postingan tabview yang sekarang baru sempat saya menaikan ke 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.

Contoh screenshot Tabview :

Langkah-langkah pembuatan tabview :

- Login 'Dasbor'
- Rancangan 'Elemen Laman'
- Edit HTML
Sebelum melakukan pengeditan pada template ada baiknya di backup terlebih dahulu, |klik| untuk tutorial backup template
- Centang pada Expand Widget
- Cari lah kode ]]></b:skin> untuk memudahkan pencarian tekan Ctrl + F, |klik| untuk tutorial cara cepat menemukan script

Jika sudah ketemu, Copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin>

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 widget 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>

Kalau anda membutuhkan kode warna silahkan |klik| untuk melihat kode warna Html.
Mudah-mudahan tutorial ini mudah di mengerti oleh sobat yang merequest dan sobat-sobat pembaca lainnya, saya rasa cukup itu saja, jika ada yang kurang jelas silahkan berkomentar.