Sedikit informasi cara pembuatan Menu Tab View

Mempersingkat satu elemen halaman menjadi 3bagianatau lebih yang masih-masing berisi wigget berbeda... itulah pertanyaan yang pernah di lontarkan salah seorang teman pada saya, waktu itu saya jawab...oh itu namanya tabview, klo di blog saya adalah sidebar menu dengan gambar seperti di Samping kiri : Widget tersebut berisi Follower Facebook, Recent Visitor dan Recent Comment. Nah cara membuatnya cukup simpel dan mudah bila anda mempelajarinya secara perlahan, karena menggunakan javascript dan css maka saya sarankan untuk mencobanya dulu pada blog percobaan, silahkan simak tutorial di bawah ini : Login ke tata letak , edit html , chek expand widget template dan cari kode ]]></b:skin> Pastekan kode CSS berikut di atasnya:

div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px;
    text-align: center;
    height: 24px;
    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: hidden;
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }

Lalu cari kode </head>  dan pastekan javascript berikut di atasnya :

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

Simpan template anda dan selesai di sesi ini, kemudian kita masuk ke elemen halaman, kemudian tentukan di mana anda akan meletakan tabview anda sendiri (Mungkin di sidebar kanan/kiri/bawah/atas), klik add gadget atau tambah gadget, pilih javascript/Html lalu pastekan kode di bawah ini :

<form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;">
    <a>Judul Tab 1</a>
    <a>Judul Tab 2</a>
    <a>Judul Tab 3</a>
    </div>
    <div class="Pages" style="width: 350px; height: 250px;">
    <div class="Page">
    <div class="Pad">
    Isi tab 1
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi tab 2
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi tab 3
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

Setelah selesai, klik aja simpan/save dan lihat hasilnya. Tab view milik anda sendiri telah selesai di buat.

Keterangan :
Warna Merah pada CSS adalah padding, width dan height serta warna dasar dari ini tab view yang harus anda sesuaikan dengan blog anda, maka dari itu coba dulu di blog percobaan yah.....
Warna Biru adalah warna judul dari masing2 tab misal di blog saya (Likes | Visitor | Comment | Post )
Warna Ungu adalah isi dari masing2 tab....pko'e yang berupa script misal script iklan, recent post atau yang lainya, terserah yang ingin anda masukan di situ apa......

Semoga sukses membuat tab view, oh ya di sini hanya di berikan contoh membuat tab view dalam 3 bagian saja, sebenernya bisa di buat menjadi 4 atau 5 bahkan lebih....untuk itu silahkan utak Atik bagian CSS nya sendiri...saya yakin pasti bisa asal berusaha, ya ndak hehe.......