Banyaknya widget atau gadget yang ingin dipasang pada blog tentunya dapat memenuhi ruang pada sidebar di blog. Agar tak memakan tempat dan untuk menghemat ruang pada blog, kita dapat memasang multi tab pada sidebar untuk meletakkan widget-widget tersebut.

Jumlah tab dalam widget multi tab ini adalah sebanyak 3 tab. Script widget multi tab ini dipasang langsung pada menu “HTML/JavaScript”. Jadi, kita tidak perlu mengedit HTML template blog.

Berikut ini langkah-langkah dalam memasang widget multi tab di Blogger. Silakan disimak dan semoga berhasil dan juga bermanfaat.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavaScript.

3. Copy kode di bawah ini dan paste di kolom “Konten”.

<style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 100px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
    background-color: #222222; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 0px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", verdana; /* Font Kotak Tab */
    font-weight: 900; /* Ketebalan Teks kotak tab */
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #736F6E; /* Warna background utama kotak tab */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #ffffff; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    </style>
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 390px;" class="Tabs">
    <a><span style="color:white">Judul TAB 1</span></a>
    <a><span style="color:white">Judul TAB 2</span></a>
    <a><span style="color:white">Judul TAB 3</span></a>
    </div>
    <div style="width: 100%; height: 250px;" class="Pages">

    <div class="Page">
    <div class="Pad">
      <div>
        ISI KONTEN TAB 1
      </div>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
   ISI KONTEN TAB 2
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
     ISI KONTEN TAB 3
    </div>
    </div>
    </div></div></form>

    <script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>
    <script type="text/javascript">tabview_initialize('TabView');
    </script>

  • Silakan ubah “Judul TAB 1,2,3” dengan judul tab yang Anda inginkan.
  • Masukkan konten Anda di “ISI KONTEN TAB 1,2,3”.
  • Mengenai atribut yang lainnya, Anda dapat mengaturnya sendiri sesuai keadaan template blog Anda.

4. Klik tombol SIMPAN.

5. Klik dan geser gadget ini ke tempat yang Anda inginkan.

6. Klik tombol SIMPAN.

7. Selesai.

Update:

Kalau ingin memasukkan link posting, coba ganti "ISI KONTEN TAB" dengan kode HTML di bawah ini.

<ol>
<li><a href="URL posting 1">anchor</a></li>
<li><a href="URL posting 2">anchor</a></li>
<li><a hef="URL posting dst">anchor</a></li>
</ol>

Contoh:

<ol>
<li><a href="http://klikmunadi.blogspot.com/2012/02/daftar-stasiun-televisi-lokal-di.html">Daftar Stasiun Televisi Lokal di Jakarta</a></li>
<li><a href="http://klikmunadi.blogspot.com/2012/02/tips-berkomentar-pada-form-komentar.html">Tips Berkomentar pada Form Komentar yang Terpotong</a></li>
</ol>

Maka hasilnya kira-kira seperti di bawah ini:

  1. Daftar Stasiun Televisi Lokal di Jakarta
  2. Tips Berkomentar pada Form Komentar yang Terpotong

Kalau tidak ingin pakai nomor, coba hilangkan tag <ol> dan </ol>

Sumber: http://districtshare.blogspot.com/2011/12/membuat-multi-tab-3-kololm-tanpa-edit.html

9 تعليقات

  1. gan masukin kontent nya gimana ya, biar pas kita klik langsung ngelink ke postingan

    ردحذف
  2. @nusantarashop Coba cek bagian Update: di atas gan..

    ردحذف
  3. mantaep gan tq ya, btw kalo mau bikin daftar menu horizontal + kalo di klik langsung ngelink ke postingan nya gimana ya, kaya punya agan di atas

    ردحذف
  4. @nusantarashop Barusan ane ke blognya agan, agan tambahin widget menu navigasi horizontal aja gan..

    ردحذف
  5. Thank, atas informasinya sobat. Salam sukses.

    ردحذف
  6. @qudrat priatna Terima kasih Sobat..
    Semoga sukses..

    ردحذف
  7. gimana caranya biar jadi 4 tab gan?

    ردحذف
    الردود
    1. Tambahkan kode <a><span style="color:white">Judul TAB 4</span></a> di bawah kode <a>span style="color:white">Judul TAB 3</span></a>

      Lalu, tambahkan kode di bawah ini
      <div class="Page">
      <div class="Pad">
      ISI KONTEN TAB 4
      </div>
      </div>
      di bawah kode berikut ini
      <div class="Page">
      <div class="Pad">
      ISI KONTEN TAB 3
      </div>
      </div>

      Jangan lupa ubah width: 390px dengan ukuran piksel yang lebih besar agar tab muat dalam satu baris.

      حذف

إرسال تعليق

أحدث أقدم