Simple Tabview Widget

Salam hangat buat sahabat blogger,
kali ini saya akan berbagi inpo, bagaimana  cara membuat widget tabview yang mudah di modifikasi, dan bisa di letakkan dimana saja.

kira2 beginilah bentuknya :

 Langsung Aja

1. Login ke akun Blogger sobat.
2. Pada halaman dashboard, masuklah lah ke bagian Tata Letak.
3. Klik Tambahkan gadget di posisi widget About The Author Box ini ingin dipasang.
4. Pilih HTML/Javascript, dan masukan kode berikut.

<style type="text/css">

div.TabView div.Tabs

{height: 30px;overflow: hidden}

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

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

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

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

font-weight:bold; color:#0F0F0F; /* 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: #5C5C5C; /* Warna background Menu Utama Atas */ }

div.TabView div.Pages {clear:both; border:2px dotted #333333; /* Warna border Kotak Utama */ overflow:hidden; background-color:#ffffff; /* 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>PAD 1</a>

<a>PAD 2</a>

<a>PAD 3</a>

</div>

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

<div class="Page">

<div class="Pad">

isi pad1

 </div>

</div>

<div class="Page">

<div class="Pad">

isi pad2

</div>

</div>

<div class="Page">

<div class="Pad">

isi pad3

</div></form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Keterangan :
Warna Kuning : Manage warna dan ukuran widget
Warna Biru : Judul masing-masing Tabview
Warna Merah : Isi tabview (isi dapat berupa teks biasa maupun Widget-widget tertentu yang ingin sobat tampilkan didalamnya, misalnya "recent post, Google+, dll"
Ganti Warna Ungu Jika sobat ingin mengganto bentuk border : solid, double, dotted, dashed, groove, ridge, inset, outset

5. Klik Simpan jika telah selesai, dan silakan lihat hasilnya.