728x90 AdSpace

HEADLINE NEWS

16 September 2010

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----
Asrizal Wahdan Wilsa

Memulai Blogging sejak tahun 2009 hingga sekarang. Aktif di bidang musik yang dinaungi salah satu label musik di Kota Bandung. Saat ini fokus melanjutkan kuliah ke jenjang S2 di Universitas Negeri Semarang (UNNES). Website: Sharing Media - Info Tips dan Trik Terbaru

  • Blogger Comments
  • Facebook Comments

11 komentar:

  1. pertamax sobat :D nice post udah aku pakai dulu tapi udah ane cabut wkwkw

    BalasHapus
  2. mantep mas... aq dh cba juga tuh,,
    :m:

    BalasHapus
  3. ini akan memperhemat ruang blog gan... tinggal pintar2 kita aj memfungsikan widget-nya..

    btw gw dah FOLLOw tuh ats nama WONG.. follow balik ya.. thx ;)

    BalasHapus
  4. Sipp kawan,...

    aq dah coba,.. liat punyaku ya,..
    ada di bawah,.. hehe

    BalasHapus
  5. nice info sob,,,ane coba dulu

    BalasHapus
  6. Wah kbtlan lg iseng2 buat blog baru.. coba ah.. mksih..

    BalasHapus
  7. Tab Menu memang ok sob dapat menghemat space blog, makasih sudah berbagi.

    BalasHapus
  8. Disimpen dulu shob .. berguna sekali

    BalasHapus
  9. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  10. Salam sahabat.., kren nih tutornya buat tab view.., mksi ya dah brbagi ilmu yg brmamfaat..

    BalasHapus
  11. Sob ane berhasil thanks tutot nya

    BalasHapus

Berkomentarlah dengan bijak, relevan dengan artikel, komentar spam dan promosi akan kami hapus, terimakasih.

Kami akan menjawab komentar anda secepat mungkin, opsi lain silakan berkomentar di halaman facebook/melalui twitter kami.

Item Reviewed: Cara Membuat Menu Tab View Description: Rating: 5 Reviewed By: Asrizal Wahdan Wilsa
Scroll to Top