Cara Membuat Tab View Tanpa Edit HTML

Unknown

Blogger, Google, SEO

Saturday 21 December 2013

Belum ada komentar

Selamat Pagi sahabat, haaaaah hari yang indah untuk jiwa yang sepi, libur libur gini enaknya kita maen, nyantai, tidur, dan juga online kyk ane gini .Untuk apa yh saya membuat post ini?
Oh iyh saya kan ingin berbagi tutorial mengenai Cara mebuat tab view tanpa edit html, cara nya mudah dan simply sekali cukup ikutilah langkah langkah seperti yang saya berikan di bawah ini .

• Buka blogger sobat
• Pilih Layout
• Tambah Element
• Pilih HTML/Javascript dan masukan kode dibawah ini :

 <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">
    konten 1
    </div>
    </div>

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

    <div class="Page">
    <div class="Pad">
    konten 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>

Kemudian Save/Simpan

SEKIAN tutorial mengenai Cara Membuat Tab View Tanpa Edit HTML