Membuat Tab View di Blogspot

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh anda blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya. 

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik-baik tutorial ini dan yang paling penting jangan lupa untuk backup template andaterlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan anda sesuaikan sendiri dengan isi dari menu yang anda gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Baiklah, sekarang kita menuju pada pokok permasalahan

1. Pertama tentunya harus login dulu ke Blogger dengan akun anda.
   
2. Tuju Tata Letak.
   
3. Klik Edit HTML.
   
4. Jangan lupa backup template ansa terlebih dahulu dengan mengklik Download Template Lengkap.
   
5. Kemudian letakkan kode javascript berikut sebelum 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>
6. Setelah itu letakkan kode berikut 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;
   }

7. Kemudian Simpan Template.
8. Langkah selanjutnya, silahkan anda klik Tata Letak.
9. Klik Elemen Halaman dan tambahkan Gadget.
10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
    

    <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: 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>

11. Kemudian Simpan.

Keterangan :

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan anda sesuaikan dengan isi.
  
• Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
  
• Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.

Itu dulu tutorial hari ini, jika ada yang mau ditanyakan, temen-temen bisa isi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Related Posts

Trik Blog

• Mengapa Lantarandigital.co.id adalah Senjata Rahasia Digital Marketing Anda
• Cara membuat populer post slider
• Connect warna HTML
• Cara Membuat Tulisan Bervariasi di Buku Tamu/CBox
• Efek Ringan
• jQuery Carousel dengan UI Kit untuk Blogger
• Membagi Sidebar Menjadi 2 Kolom di Blogspot
• Modifikasi Sidebar di Blogspot
• Memasang Menu Slide-In di Blogspot
• Cara Merubah Lebar Kolom Template
• Cara Membuat Spolier Di Blogspot
• Membuat Border Dan Background Template Blogger
• Mengganti Pager Link Blogger Dengan Icon
• Modifikasi Blockquote Di Blogspot
• Membuat Tombol Back To Top Di Blogger
• Membuat Widget Hanya Tampil di Halaman Tertentu
• Menghilangkan Link Posting Lama dan Posting Baru di Blog
• Membuat Menu dTree di Blogger
• Cara Membuat Read More Otomatis Versi 3
• Pasang Banner di Header Blog
• Membuat 3 Kolom di Bawah Header Blogspot
• Tutorial Membuat Text Area
• Membuat Menu Drop Down di Blogspot

Anda sedang membaca artikel tentang Membuat Tab View di Blogspot dan anda bisa menemukan artikel Membuat Tab View di Blogspot ini dengan url https://blackyz-art.blogspot.com/2013/07/membuat-tab-view-di-blogspot.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Tab View di Blogspot ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.