Membuat Tabview Dengan Widget Tanpa Menggunakan CSS

Screeshot By Sharing Blog Just 4 U

Sharing Blog Just 4 U  mengidamkan sebuah template yang minimalis, ringkas, dan tetap menarik?
Mungkin dengan adanya penambahan tabview pada template Sharing Blog Just 4 U  bisa mewujudkan template idaman Saudara/i Sobat .
Tabview bisa menghemat dan meringkas ruang template, jadi pengunjung blog Sobat tidak pusing ngeliatin blog Anda Sobat. Trus gimana bikinnya?

Pertama Kita Harus Log In Dolo Ke BLOGGER kita





1. Tambahkan widget HTML/Javascript dan letakkan dimana tempat tebwiew yang jagoan kehendaki

2. Copi dan pastekan kode dibawah ini pada widget HTML yang udah Sobat" buat sebelumnya.

    <style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs
    {background-color: #ffffff; /* Warna background Menu Utama Atas */ }
    div.TabView div.Tabs a {float:left; display:block; width: 86.5px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:0px; vertical-align:middle; border:3px solid #000000; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Courier", Serif; /* Jenis Font Menu Utama Atas */
    font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px}
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #B22222; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:3px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#000000; /* 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: 280px;" class="Tabs">
    <a>Nama tabview 1</a>
    <a>Nama tabvier 2</a>
    <a>Nama tabview 3</a>
    </div>
    <div style="width:273px; height:400px; " class="Pages">
    <div class="Page">
    <div class="Pad">

    Masukkan kode widget untuk tabview 1 di sini

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

    Masukkan kode widget untuk tabview 2 di sini

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

    Masukkan kode widget untuk tabview 3 di sini

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

3. Modifikasi kode yang diberi keterangan berwarna Merah dan Hijau sesuai dengan template dan selera Sobat Telah Selesai Di Setting Deh., Berikutnya

4. Simpan dan semoga berhasil. Life for sharing From Just 4 U...