Tutorial Membuat Tab View Menu Tanpa Edit HTML di Blog

Banyak sekali cara membuat blog terlihat lebih menarik sehingga banyak di datangi pengunjung, tapi jika membuat loading blog menjadi lama tentu membuat pengunjung enggan balik lagi berkunjung, apa lagi blog terkesan berantakan dan tidak tersusun rapi
kali ini saya akan mencoba berbagi supaya blog sobat terlihat keren dan lebih rapi, dengan mengunakan tab view menu.
Sumber: penajib.blogspot.com
Dengan sobat mengunakan tab view menu tampilan blog akan terlihat lebih rapi, tab view menu widget tambah dengan tampilan tab banyak sekali pariasinya dan gaya tab itu sendiri. jika sobat berkunjung pada blog satu ke blog yang lain yang memakai tab view menu pasti akan menemukan tampilan tab vie menu dengan gaya yang berbeda.
Sobat tidak usah bingung kita bahasa yang mudah mudah saja, sama sama masih belajar harus berbagi ilmu , betul kan. he he

balik lagi ke topik tab view menu, tanpa basa basi langsung saja cara membuat tab view menu seperti berikut
Login  ke akun Blogger
klik Tata Letak => Elemen Halaman => pilih HTML / JAVASCRIPT 

Copy dan paste kode di bawah ini ke dalam kotak HTML/JAVASCRIPT
 Sumber: penajib.blogspot.com

     <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 80px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
    background-color: #000; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 1px solid #ccc; /*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: #736F6E; /* Warna background utama kotak tab */ }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #ffffff; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px; /* 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: #fff">Tab 1</span></a>
    <a><span style="color: #fff">Tab 2</span></a>
    <a><span style="color: #fff">Tab 3</span></a>
    </div>
    <div style="width: 300px; height: 200px;" class="Pages">

    <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'>
    //<![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></div>

Sumber: penajib.blogspot.com
Tulisan warna biru TAB1, TAB2, TAB3 adalah nama susunan TAB, silahkan di ganti sesuai keinginan sobat.
Tulisan warna merah width: 300px  : Lebar kotak TAB
Tulisan warna merah height: 200px : Panjang kotak TAB
Tulisan warna pink ISI TAB 1, ISI TAB 2, ISI TAB 3 : isi tampilan di dalam TAB, silahkan ganti dengan tulisan teks, gambar, banner atau yang lainnya. Semoga bermanfaat