Cara Membuat Tab View Multitab di Blog

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 menaikkan maupun menurunkan scrollbar hanya untuk sekedar menarik status dari blog tersebut.

Nah! kesempatan kali ini,akan membahas tentang widget multi tab tersebut.
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>
   
   /* Menu Tab View
   ----------------------------------------------- */
   div.TabView div.Tabs {widht:100%;
   padding-top: 0px;
   height: 24px;
   overflow: hidden;
   }
   /* Menu Utama */
   div.TabView div.Tabs a {
   float: left;
   display: block;
   width: 110px; /* ukuran lebar menu */
   text-align: center;
   height: 30px; /* ukuran tinggi menu */
   padding-top: 7px;
   margin-right:4px; /* jarak antarmenu */
   vertical-align: middle;
   border: 1px solid #ccc; /* warna border menu */
   border-bottom-width: 0;
   margin:0px;
   padding: 5px 0;
   font-family:Arial,Helvetica,sans-serif;
   font-size:12px;
   font-weight:bold;; /* besar hurup menu */
   background-color: #4c4c4c; /* warna latar menu */
   color: #FFFFFF; /* warna hurup menu */
   -moz-border-radius-topleft:15px;
   -moz-border-radius-topright:15px;
   -webkit-border-top-left-radius:15px;
   -webkit-border-top-right-radius:15px;
   }
   div.TabView div.Tabs a.Active {
   background-color: #FFFFFF; /* warna background menu aktif */
   color: #000000;
   }
   div.TabView div.Tabs a:hover {
   background-color: #999999; /* warna background menu hover */
   color: #FFFFCC;
   font-weight: bold;
   }
   /* Kotak Utama */
   div.TabView div.Pages {
   clear: both;
   border: 1px solid #CCC; /* warna border kotak utama */
   overflow: hidden;
   background:#FFFFFF; /* background kotak utama */
   }
   div.TabView div.Pages div.Page {
   height: 100%;
   padding: 7px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad {
   padding: 5px 0px;
   font-size: 12px; /* besar huruf kotak utama */
   }
   
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.  
7. Kemudian klik Save Template
8. Masuk ke menu Page Elements
9. 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>
   
   
10. Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.
11. Selesai

Sebagai catatan:

• Angka yang berwarna MERAH adalah ukuran lebar dan tinggi widget tab view.
• Kode yang berwarna KUNING adalah teks pada menu utama di bagian atas.
• Kode yang berwarna HIJAU adalah teks yang berada di halaman tab view yang bisa kamu isi dengan link apa saja, gambar, banner dan script lainnya.

Terima kasih anda telah membaca artikel Cara Membuat Tab View Multitab di Blog . Tak lengkap rasanya jika kunjungan anda di blog RED'ANT Tutorial tanpa meninggalkan Jempol dan komentar. Untuk itu silahkan berikan tanggapan anda pada kotak komentar di bawah. Semoga artikel Cara Membuat Tab View Multitab di Blog ini bermanfaat untuk anda. Salam Photoshoper