Cara Membuat Tab Menu pada Sidebar Blog

Tutorial Kali ini adalah Cara Membuat Tab Menu di Sidebar Blogger.Untuk membuat tab menu ia memerlukan kode yang panjang sedikit oleh itu anda perlu perhatikan setiap tutorial ini dan pertama sekali jangan lupa backup template anda.

Jika sidebarbar lebar dan tinggi tidak sesuai dengan blog anda,anda boleh edit sendiri.

Langkah 1

1. Login ke Blogger -> Design -> klik Edit HTML -> Tick Expand Template Widget.

Langkah 2

1. Gunakan Find (Ctrl + F) untuk mencari kode </head>, kemudian letakkan kode di bawah ini di atas kode </head>:
   
   <script type='text/javascript'>
   //<![CDATA[
   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>
   

Langkah 3

1. Setelah itu letakkan kode di bawah ini di atas kode ]]></b:skin>:
   
   
   div.TabView div.Tabs
   {
   height: 30px;
   overflow: hidden;
   }
   div.TabView div.Tabs a
   {
   float: left;
   display: block;
   width: 98px; /*Lebar Menu Utama Atas*/
   text-align: center;
   height: 30px; /* Tinggi Menu Utama Atas */
   padding-top: 3px;
   vertical-align: middle;
   border: 1px solid #BDBDBD; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Verdana", Serif; /* Font Menu Utama Atas */
   font-weight: bold;
   color: #000; /* Warna Font Menu Utama Atas */
   -moz-border-radius-topleft:10px;
   -moz-border-radius-topright:10px;
   }
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #E6E6E6; /* Warna background Menu Utama Atas */
   }
   div.TabView div.Pages
   {
   clear: both;
   border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
   overflow: hidden;
   background-color: #E6E6E6; /* Warna background Kotak Utama */
   }
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }

2. Kemudian Simpan Template.

Langkah 4

1. 1. Login ke Blogger, Klik Design :
   
   
   
   
   
   2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
   
   3. Pilih HTML/Javascript;
   
   
   
   
   
   4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;
   
   

2. Kemudian masukan kode di bawah ini ke dalam HTML/Javascript:
   
   <form action="tabview.html" method="get">
   <div class="TabView" id="TabView">
   <div class="Tabs" style="width: 300px;">
   <a>Tab 1</a>
   <a>Tab 2</a>
   <a>Tab 3</a>
   </div>
   <div class="Pages" style="width: 300px; height: 300px;">
   <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>
   
   
   Kemudian Simpan.

Info:

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu,anda boleh suaikan dengan blog anda.
  

• Kode yang berwarna biru ialah judul - judul dari menu;

• Dan yang berwarna ungu, adalah isi dari menu. anda boleh tambah link, gambar, banner dan lain-lain.

Semoga berjaya.