Cara Membuat TabView di Blogspot: Bikin Tampilan Blog Makin Rapi & Fungsional

Tutorial membuat TabView di Blogspot yang rapi dan interaktif. Cocok untuk menampilkan banyak konten tanpa bikin halaman blog jadi sumpek.

TabView: Solusi Buat Anda yang Punya Banyak Konten di Blog

Pernah merasa blog Anda mulai terlihat ‘penuh sesak’? Apalagi kalau isinya banyak link, kategori, atau koleksi postingan yang butuh ditampilkan rapi. Nah, di sinilah fitur TabView bisa jadi penyelamat.

TabView itu semacam menu tab yang bisa menampilkan beberapa halaman atau konten berbeda dalam satu tempat. Jadi, daripada halaman blog panjang banget ke bawah, Anda bisa kelompokkan semuanya dalam tampilan tab, mirip seperti folder di dalam satu map.

 

Seperti Apa Bentuk TabView?

Bayangkan satu kotak dengan beberapa tombol di atasnya bertuliskan “Tab 1”, “Tab 2”, dan seterusnya. Tiap tab kalau diklik akan menampilkan isi yang berbeda. Anda bisa isi kontennya dengan link, gambar, bahkan banner promosi atau daftar artikel.

Sekilas kelihatan simpel, tapi sangat membantu buat pengalaman pembaca. Blog jadi kelihatan lebih rapi dan mudah dijelajahi.

 

Cara Membuat TabView di Blogspot

Tenang, Anda nggak perlu jadi jago coding dulu buat pasang TabView. Cukup ikuti langkah-langkah ini, dan TabView bakal tampil manis di blog Anda:

1. Login ke akun Blogspot Anda.
2. Masuk ke menu Layout, lalu pilih Edit HTML.
3. Cari kode ]]></b:skin> dan tempelkan CSS TabView sebelumnya:

div.TabView div.Tabs {
  height: 24px;
  overflow: hidden;
}

div.TabView div.Tabs a {
  float: left;
  display: block;
  width: 90px;
  text-align: center;
  height: 24px;
  padding-top: 3px;
  vertical-align: middle;
  border: 1px solid #000000;
  border-bottom-width: 0;
  text-decoration: none;
  font-family: "Arial", Times New Roman, Serif;
  font-weight: 900;
  color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
  background-color: #BDBDBD;
}

div.TabView div.Pages {
  clear: both;
  background-color: #FFFFFF;
  border: 1px solid #000000;
  overflow: hidden;
}

div.TabView div.Pages div.Page {
  height: 100%;
  padding: 0px;
  overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
  padding: 3px 5px;
}
    

Langkah selanjutnya, pasang script sebelum </head>:

<script src='https://cdn.jsdelivr.net/gh/username/tabview.js' type='text/javascript'></script>
    

(Catatan: Ganti dengan URL JavaScript yang aktif karena yang di contoh awal sudah mati)

 

Tambahkan Gadget TabView di Blog

Setelah template disimpan, sekarang waktunya menambahkan elemen TabView ke blog:

1. Masuk ke menu Page Elements.
2. Klik Add a Gadget → pilih HTML/JavaScript.
3. Copy dan paste kode berikut ini:

<form action="tabview.html" method="get">
  <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;">
      <a>FAMILY</a>
      <a>MALE</a>
      <a>FEMALE</a>
    </div>

    <div class="Pages" style="width: 350px; height: 250px;">
      <div class="Page"><div class="Pad">
        <a href="https://link1.com">Artikel Keluarga</a><br/>
        <a href="https://link2.com">Tips Parenting</a><br/>
      </div></div>

      <div class="Page"><div class="Pad">
        <a href="https://link3.com">Artikel Pria</a><br/>
      </div></div>

      <div class="Page"><div class="Pad">
        <a href="https://link4.com">Artikel Wanita</a><br/>
      </div></div>
    </div>
  </div>
</form>

<script type="text/javascript">
  tabview_initialize('TabView');
</script>

Kalau semua sudah terpasang, klik Save, lalu tempatkan widget sesuai layout blog Anda.

 

Tips Kustomisasi TabView

• Ingin ubah teks Tab? Tinggal ganti “Tab 1” jadi “Travel”, “Review”, atau sesuai topik blog Anda.
• Isi tab-nya bisa diisi apa aja: link artikel, banner promosi, video, bahkan form kontak.
• Lebar dan tinggi tab bisa diatur di bagian style, biar pas dengan template blog Anda.

 

TabView = Hemat Ruang, Tambah Fungsionalitas

Dengan TabView, blog Anda nggak cuma jadi lebih rapi tapi juga lebih profesional. Pembaca pun lebih betah karena navigasi jadi gampang. Dan yang paling penting: blog Anda tampil lebih modern, tanpa harus ribet bikin desain dari nol.

Jadi, tunggu apa lagi? Yuk mulai coba pasang TabView sekarang juga!

 

Yuk Bagikan Tutorial Ini

Kalau Anda merasa tutorial ini bermanfaat, jangan lupa share ke sesama blogger. Atau punya versi TabView yang lebih kece? Cerita dong di kolom komentar! 😊