Cara Membuat Menu Tab View

Cara Membuat Menu Tab View adalah cara yang tepat bagi sobat blogger semua yang memiliki masalah dengan tata letak/mempunyai banyak widget untuk halaman blognya. widget terlalu banyak pasti membutuhkan ruang yang banyak pula. jika menggunakan tata letak biasa pasti widget ini akan menumpuk dan membuat page/halaman blog menjadi panjang dan kurang baik untuk dilihat.

Bagaimanakah solusinya? Membuat menu tab view ini adalah solusinya. dengan menu tab view ini, 3 buah atau mungkin lebih dapat dibuat dalam satu widget, dan ini akan memperhemat ruang halaman blog sobat, dan tampilan blog akan semakin rapi dan salah satu hal yang membuat blog berat adalah widget, baca cara meringankan template dengan css compressor sebagai pendukung untuk meringankan loading blog.

Bagaimanakah cara membuatnya? mari kita simak tutorialnya.

• Login ke account blogger sobat
• Masuk ke menu rancangan
• Klik edit html
• Expand widget template
• Jangan lupa backup terlebih dahulu template milik sobat, untuk menghindari galat dengan klik download template lengkap

• Letakkan kode javascript dibawah ini diatas 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>

• Lalu letakkan kode berikut diatas 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;
      }

• Simpan template

• Kemudian masuk ke rancangan

• Klik elemen halaman dan tambah gadget

• Pilih yang html dan javascript dan simpan kode dibawah ini di dalamnya

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

• Kemudian simpan

Keterangan :

• Untuk kode yang berwarna hijau adalah lebar dan tinggi menu, silahkan sesuaikan dengan kebutuhan.
• Kode yang berwarna orange adalah warna judul menu, silahkan isi dengan judul - judul dari menu.
• Dan yang berwarna biru, adalah isi dari menu. Dapat ditambahkan link, gambar, banner, dll.

----Selamat Mencoba dan Semoga Bermanfaat----