Cara Mudah Membuat Tab Menu pada Sidebar

Halo sobat beloger, kali ini saya ingin membahas cara membuat tab menu pada sidebar atau membuat menu 3 tab di sidebar. Ini juga berdasarkan widget dari blog saya, semoga bisa bermanfaat bagi anda semua.
Oke berikut ini cara mudah membuat tampilan tab menu pada sidebar

Cara Mudah Membuat Tab Menu pada Sidebar

• Pertama sobat masuk ke blog sobat
• Kemudian menuju tata letak
• Tambahkan gedget - HTML/Javascript
• Kemudian Copy dan paste kode di bawah ini

<style type="text/css">

    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Kotak Tab */
    height: 40px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 5px; /* Posisi Kotak Tab */
    background-color: #transparent; /* Warna background Kotak Tab */
    padding-top: 0px; /* Spasi Atas */
    border: 1px solid #6B8E23; /* Warna border kotak Tab */
    border-bottom: 1px solid #6B8E23; /*Warna border bawah kotak tab *
    font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
    font-weight: 900; /* Ketebalan Teks kotak tab */

    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #9ACD32; /* Warna background utama kotak tab */ }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #transparent; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 150%;
    padding: 10px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    </style>

    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 300px;" class="Tabs">
    <a><span style="color: #000000">Menu Tab 1</span></a>
    <a><span style="color: #000000">Menu Tab 2</span></a>
    <a><span style="color: #000000">Menu Tab 3</span></a>
    </div>
    <div style="width:300px; height: 200px;" class="Pages">

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

 "ISI KONTEN TAB 1" 

    </div>
    </div>

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

 "ISI KONTEN TAB 2"   


    </div>
    </div>

    <div class="Page">
    <div class="Pad">
  
"ISI KONTEN TAB 3" 

    </div>
    </div>
    </div></div></form>

    <script type='text/javascript'>
    //<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);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);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)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
    //]]>
    </script>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

KETERANGAN:

• Tulisan yang berwarna kuning menunjukan besarnya Tab Menu,bisa anda ganti sesuai keinginan anda
• Tulisan yang berwarna biru menunjukan warna Tab Menu, bisa anda ganti sesuai dengan keinginan anda
• Tulisan yang berwarna hijau menunjukan judul koten anda
• Dan tulisan yang berwarna merah menunjukan isi konten sobat
• Klik save dan lihat hasilnya

Gimana sobat gampangkan? Semoga bermanfaat untuk anda anda

Demikianlah artikel mengenai Cara Mudah Membuat Tab Menu pada Sidebar