Membuat Widged Tab View

Beberapa kali googling dan ketemu Artiket tentang membuat tab view selalu gagal dan gagal.coba terus di temeni ama mbah google eh akhirnya dapat juga nich sebuah artikel yang di maksud

lewat situs bangdel ayo kita langsung aja 

1. Login ke blog dengan ID anda
2. Pilih menu Layout » masuk ke Edit HTML
3. Cari kode ini ]]></b:skin>
4. Copy lalu paste kode berikut ini sebelum kode ]]></b:skin>
   
   
   
   
   
   

    div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
   
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Menu Utama Atas */
    text-align: center;
    height: 24px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000000; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama   Atas */
    font-weight: 900;
    color: #000080; /* Warna Font Menu Utama Atas */
    }
   
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #BDBDBD; /* Warna background Menu Utama Atas */
    }
   
    div.TabView div.Pages
    {
     clear: both;
    background-color: #FFFFFF; /* Warna background Kotak Utama */
    border: 1px solid #000000; /* Warna border Kotak Utama */
    overflow: hidden;
    }
   
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
   
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;

    }

   
   
   
   
   
   
   1. Teks yang berwarna merah adalah keterangan untuk mengatur tab view. Seperti ukuran tebal border, tinggi dan lebar tab view serta warna background. Nah, untuk mengatur warna,
   2. Kemudian pasang kode berikut sebelum kode </head>
   
   
   
   
   
   
    <script type='text/javascript'>
   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>
   
   
5. Kemudian klik Save Template
6. Masuk ke menu Page Elements
7. Pilih Add a Gadget » Pilih menu HTML/Javascript, Copy lalu paste kode berikut di dalamnya.
   
   
   
   

   <form action="tabview.html" method="get">
   <div class="TabView" id="TabView">
   <div class="Tabs" style="width: 350px;">
   <a>Tab 1</a>
   <a>Tab 2</a>
   <a>Tab 3</a>
   </div>
   <div class="Pages" style="width: 350px; height: 250px;">
   
   <div class="Page">
   <div class="Pad">
   Tab 1.1 <br />
   Tab 1.2 <br />
   Tab 1.3 <br />
   </div>
   </div>
   
   <div class="Page">
   <div class="Pad">
   Tab 2.1 <br />
   Tab 2.2 <br />
   Tab 2.3 <br />
   </div>
   </div>
   
   <div class="Page">
   <div class="Pad">
   Tab 3.1 <br />
   Tab 3.2 <br />
   Tab 3.3 <br />
   </div>
   </div>
   
   </div>
   </div>
   </form>
   
   <script type="text/javascript">
   tabview_initialize('TabView');
   </script>

8. Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.
9. Selesai
Sebagai catatan:
• Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
• Kode yang berwarna hijau adalah teks pada menu utama di bagian atas.
• Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa kamu isi dengan link apa saja, gambar, banner dan script lainnya.
• Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip2-kedip. Tambahkan menu berikutnya di bawahnya.
Contoh pengaturan teks :
• Teks "Tab 1" dapat diganti dengan teks lain seperti "Tutorial Blogger", "Bisnis" atau teks lainnya.
• Sedangkan pada bagian isi menu di bawahnya yang berwarna biru Tab 1.1 <br /> bisa diganti dengan link posting blog seperti ini :
  <ul><li><a href="http://blogyundha.blogspot.com/2010/05/membuat-widget-tab-view.html">Tentang  Membuat Tab View</a></li>

Source :bangdel.blogspot.com ----Selamat Mencoba ----