Membuat Tab View di widget tanpa edit html ~ F2

Membuat Tab View di widget tanpa edit html | Pada pembahasan sebelumnya saya pernah share tentang cara pembuatan tabview keren di blog,dan kali ini juga masih membahas tentang cara pembuatan tab view,tetapi kali ini membuat tabview nya tanpa harus edit html,kita hanya perlu menyimpan kode di widget dan kita perlu memasukan javascrift di kode tersebut,dan untuk pembuatan tabviewnya adalah sebagai berikut

Silahkan masuk ke blogger
Lalu pilih template nya
Kemudian masuk ke Dashboard
Lalu Klik Layout atau tata letak
Lalu pilih lagi Tambah Gadget
Kemudian Klik Javascrift/Html
dan masukan kode di bawah ini
Kemudian klik save dan lihat hasilnya

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

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

Nah itulah cara pembuatan tabview di widget tanpa harus edit html,semoga artikel ini bisa bermanfaat dan bisa membantu anda semua

File download Mp3 Full Album kami compres menggunakan rar dan disimpan melalui hosting 4shared.com dan mediafire.com, file rar tidak menggunakan Password. How To Download