Header Ads

Cara Memasang Multi Tab di Blogger

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.

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

10 comments:

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

    ReplyDelete
  2. @nusantarashop Coba cek bagian Update: di atas gan..

    ReplyDelete
  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

    ReplyDelete
  4. @nusantarashop Barusan ane ke blognya agan, agan tambahin widget menu navigasi horizontal aja gan..

    ReplyDelete
  5. Info yang baguz sekali untuk disimak.....
    Bermanfaat sekali untuk saya....

    Mohon kunjungan baliknya yaa....
    Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

    ( http://zamrudhijau.blogspot.com/ )

    ReplyDelete
  6. Thank, atas informasinya sobat. Salam sukses.

    ReplyDelete
  7. @qudrat priatna Terima kasih Sobat..
    Semoga sukses..

    ReplyDelete
  8. gimana caranya biar jadi 4 tab gan?

    ReplyDelete
    Replies
    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.

      Delete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.