Cara Memasang Multi Tab di Blogger

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.

3 tab view menu.

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