Memasang Widget Tab View Pada Blog

emarin saya dapat pertanyaan dari Fandy seperti ini "salam kenal sob. oh iya gw mau sedikit tanya nih gmana cara buat tab View seperti punya kamu .? makasih sob". Oke, terimakasih kembali Fandy. Sebenarnya sudah banyak yang memposting tentang membuat tab view, namun tak apa saya tuliskan tutorialnya di sini. Widget tab view sangat berguna untuk blog karena dapat menghemat ruang pada blog dan bisa menampung begitu banyak link serta konten blog di dalamnya. Contohnya bisa anda lihat pada gambar di bawah ini:


Nah, untuk membuat widget tab view pada blog anda silahkan ikuti langkah berikut :

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;
   }

   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, silahkan gunakan kode warna saya.
5. 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>

6. Kemudian klik Save Template
7. Masuk ke menu Page Elements
8. 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>

9. Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.
10. 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://http://flash085.blogspot.com/">AVOID85</a></li>

Mudah-mudahan tutorial membuat widget tab view ini dapat bermanfaat, terima kasih.

Related Post