Membuat menu tab view pada blogger

Dari anda melihat gambar disamping ini saja,anda pasti sudah mengerti apa yang saya maksud dari multi halaman/multi tab tersebut.
Yup! Membuat Widget sederhana yang bertujuan untuk menghemat tempat,sekaligus menambah kerapian dari blog/web tersebut.
Selain itu,pengunjung tidak merasa lelah menaikan maupun menurunkan scrollbar hanya untuk sekedar menari status dari blog tersebut.

Nah! kesempatan kali ini,akan membahas tentang widget multi tab tersebut.
Sebenarnya artikel ini sudah di publikasikan oleh Mas Herman di artikelnya ’Menambahkan Widget Tab View Pada Blog’.

ok. saya akan menjabarkannya lagi.




Sebenarnya sangat sederhana dalam membuat widget bertab-tab ini,untuk yang belum tahu cara membuatnya,anda bisa ikuti langkah2 berikut:

1. Login ke blog dengan ID anda
2. Pilih menu Rancangan » masuk ke Edit HTML
3. Cari kode ini ]]></b:skin>
4. Copy lalu paste kode berikut ini diatas 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;
   }
   
   
5. Kemudian pasang kode berikut diatas 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 berwarn KUNING 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.