Cara Membuat Multi Tab di Blog (CSS Saja)

4/07/2026
Cara Membuat Multi Tab di Blogger Menggunakan CSS Saja

Multi tab di Blogger dapat menjadi solusi praktis untuk menyajikan banyak informasi dalam satu area tanpa membuat artikel terlihat terlalu panjang. Dengan sistem tab, beberapa bagian konten dapat ditempatkan dalam panel yang berbeda dan pengunjung cukup memilih tab untuk melihat informasi yang diinginkan.

Teknik ini cocok digunakan untuk berbagai jenis artikel, seperti ulasan produk, spesifikasi perangkat, tutorial, daftar fitur, resep, dokumentasi, maupun informasi lainnya yang memiliki beberapa kategori pembahasan.

Menariknya, Anda dapat membuat multi tab di Blogger hanya menggunakan HTML dan CSS, tanpa JavaScript tambahan. Pada tutorial ini, kita akan membahas cara kerja tab berbasis CSS, kode lengkap yang dapat digunakan, cara memasangnya di Blogger, serta tips melakukan modifikasi agar tampilannya sesuai dengan desain blog.

Apa Itu Multi Tab Berbasis CSS?

Multi tab berbasis CSS adalah komponen antarmuka yang memungkinkan beberapa bagian konten ditampilkan dalam panel berbeda, kemudian pengunjung dapat berpindah antarbagian melalui tombol tab.

Pada contoh ini, sistem menggunakan elemen radio button HTML sebagai pengendali. Radio button disembunyikan menggunakan CSS, kemudian elemen label digunakan sebagai tombol tab yang dapat diklik oleh pengunjung.

CSS kemudian memanfaatkan kondisi :checked untuk menentukan panel mana yang harus ditampilkan.

Secara sederhana, alurnya adalah:

Pengunjung memilih tab
        ↓
Radio button menjadi checked
        ↓
CSS membaca status :checked
        ↓
Panel yang sesuai ditampilkan
        ↓
Panel lainnya disembunyikan

Dengan pendekatan ini, perpindahan konten dapat dilakukan tanpa JavaScript.

Keuntungan Membuat Multi Tab di Blogger

Penggunaan tab dapat membantu mengatur konten yang memiliki beberapa kelompok informasi. Pengunjung tidak perlu melihat seluruh isi panel sekaligus sehingga tampilan halaman dapat terasa lebih ringkas.

  • Membuat konten lebih terorganisir berdasarkan kategori.
  • Menghemat ruang tampilan untuk informasi yang panjang.
  • Tidak membutuhkan JavaScript untuk fungsi dasar perpindahan tab.
  • Mudah dimodifikasi menggunakan CSS.
  • Dapat digunakan pada Blogger melalui mode HTML.
  • Cocok untuk tampilan mobile dengan penyesuaian CSS yang tepat.

Namun, penggunaan tab sebaiknya tetap mempertimbangkan kebutuhan pengguna. Informasi yang sangat penting sebaiknya tidak disembunyikan hanya demi menghemat ruang. Pastikan pengunjung tetap mudah menemukan informasi utama pada halaman.

Contoh Penggunaan Multi Tab pada Artikel Blogger

Misalnya Anda membuat artikel ulasan sebuah smartphone. Artikel tersebut dapat memiliki beberapa pembahasan seperti deskripsi, spesifikasi, dan ulasan.

Daripada menampilkan semuanya secara berurutan dalam satu halaman yang panjang, Anda dapat membuat tiga tab:

  • Deskripsi
  • Spesifikasi
  • Ulasan

Pengunjung yang ingin melihat spesifikasi dapat langsung memilih tab tersebut tanpa harus menggulir halaman melewati seluruh pembahasan sebelumnya.

Struktur Multi Tab CSS yang Digunakan

Komponen multi tab pada tutorial ini terdiri dari beberapa bagian:

  1. Radio button sebagai pengendali tab.
  2. Label sebagai tombol navigasi tab.
  3. Panel konten sebagai tempat informasi.
  4. CSS selector :checked untuk mengatur panel yang tampil.

Ketiga radio button menggunakan atribut name yang sama sehingga hanya satu pilihan yang dapat aktif dalam satu waktu.

Kode CSS Multi Tab Blogger

Berikut adalah CSS yang digunakan untuk membuat desain dan fungsi dasar multi tab. Kode ini mengatur tampilan container, tombol tab, panel konten, serta efek transisi.

<style>
.wadah-tab-css {
    display: flex;
    flex-wrap: wrap;
    font-family: inherit;
    margin: 25px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.input-tab {
    display: none;
}

.label-tab {
    padding: 15px 20px;
    background-color: #f8fafc;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    flex: 1;
    text-align: center;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    font-size: 15px;
}

.label-tab:hover {
    color: #3b82f6;
    background-color: #f1f5f9;
}

.panel-tab {
    width: 100%;
    padding: 25px 20px;
    display: none;
    color: #334155;
    line-height: 1.7;
    border-top: 1px solid #e2e8f0;
    font-size: 15px;
}

#tab-1:checked ~ .label-tab[for="tab-1"],
#tab-2:checked ~ .label-tab[for="tab-2"],
#tab-3:checked ~ .label-tab[for="tab-3"] {
    color: #3b82f6;
    border-bottom: 3px solid #3b82f6;
    background-color: #ffffff;
}

#tab-1:checked ~ .panel-1,
#tab-2:checked ~ .panel-2,
#tab-3:checked ~ .panel-3 {
    display: block;
    animation: munculHalus 0.4s ease-in-out;
}

@keyframes munculHalus {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>

Penjelasan CSS Multi Tab

Container Multi Tab

Class .wadah-tab-css digunakan sebagai pembungkus seluruh komponen tab.

.wadah-tab-css {
    display: flex;
    flex-wrap: wrap;
}

Properti tersebut memungkinkan elemen di dalamnya tersusun secara fleksibel dan dapat membungkus ketika ruang tidak mencukupi.

Menyembunyikan Radio Button

Radio button digunakan sebagai pengendali, tetapi tidak perlu ditampilkan secara visual kepada pengunjung.

.input-tab {
    display: none;
}

Label yang terhubung dengan radio button kemudian berfungsi sebagai tombol tab.

Membuat Label Menjadi Tombol

Class .label-tab mengatur tampilan label agar terlihat seperti navigasi tab.

.label-tab {
    padding: 15px 20px;
    cursor: pointer;
    flex: 1;
}

Properti cursor: pointer memberikan indikasi bahwa elemen tersebut dapat diklik.

Menampilkan Panel yang Dipilih

Bagian terpenting dari sistem ini berada pada selector :checked.

#tab-1:checked ~ .panel-1 {
    display: block;
}

Ketika radio button dengan ID tab-1 aktif, CSS akan menampilkan panel dengan class panel-1.

Kode HTML Multi Tab Siap Pakai

Setelah CSS disiapkan, gunakan HTML berikut sebagai struktur multi tab. Contoh ini menyediakan tiga tab yang terdiri dari Deskripsi, Spesifikasi, dan Ulasan.

<div class="wadah-tab-css">

    <input type="radio" name="grup-tab" id="tab-1" class="input-tab" checked="checked" />
    <label for="tab-1" class="label-tab">Deskripsi</label>

    <input type="radio" name="grup-tab" id="tab-2" class="input-tab" />
    <label for="tab-2" class="label-tab">Spesifikasi</label>

    <input type="radio" name="grup-tab" id="tab-3" class="input-tab" />
    <label for="tab-3" class="label-tab">Ulasan</label>

    <div class="panel-tab panel-1">
        Tuliskan teks paragraf penjelasan atau deskripsi produk Anda di area ruang pertama ini.
    </div>

    <div class="panel-tab panel-2">
        Tuliskan rincian fitur atau spesifikasi lengkap teknis di area ruang kedua ini.
    </div>

    <div class="panel-tab panel-3">
        Tuliskan kesimpulan, opini pribadi, atau ulasan akhir Anda di area ruang ketiga ini.
    </div>

</div>

Cara Memasang Multi Tab di Blogger

Anda dapat memasang komponen multi tab langsung pada postingan atau halaman Blogger menggunakan mode HTML.

Langkah 1: Buka Artikel Blogger

Masuk ke dashboard Blogger, kemudian buat artikel baru atau buka artikel yang ingin Anda edit.

Langkah 2: Pilih Mode HTML

Pada editor Blogger, ubah mode penulisan dari Tampilan Menulis ke Tampilan HTML.

Langkah 3: Tempelkan Kode CSS

Masukkan kode CSS multi tab pada bagian yang sesuai di artikel.

Langkah 4: Tempelkan Struktur HTML

Setelah CSS, masukkan kode HTML multi tab pada lokasi artikel yang Anda inginkan.

Langkah 5: Ganti Isi Tab

Ganti teks Deskripsi, Spesifikasi, dan Ulasan dengan kategori informasi yang sesuai dengan artikel Anda.

Langkah 6: Simpan dan Pratinjau

Gunakan fitur Pratinjau untuk memastikan tombol tab dapat diklik dan panel konten muncul sesuai pilihan.

Cara Mengubah Nama Tab

Nama tab dapat diubah melalui elemen label.

Misalnya:

<label for="tab-1" class="label-tab">
  Deskripsi
</label>

Dapat diubah menjadi:

<label for="tab-1" class="label-tab">
  Informasi
</label>

Anda juga dapat menggunakan nama seperti:

  • Cara Membuat
  • Bahan
  • Langkah
  • Fitur
  • Harga
  • FAQ
  • Download

Gunakan nama tab yang singkat dan jelas agar pengunjung dapat memahami isi setiap panel.

Cara Mengubah Isi Panel Tab

Isi setiap panel berada di dalam elemen dengan class panel-tab.

Contohnya:

<div class="panel-tab panel-1">
    Isi informasi Anda di sini.
</div>

Anda dapat memasukkan paragraf, daftar, gambar, tautan, atau elemen HTML lain yang sesuai dengan kebutuhan.

Cara Membuat Multi Tab untuk Artikel Produk

Untuk artikel produk, struktur tiga tab dapat dibuat seperti berikut:

<label for="tab-1" class="label-tab">Fitur</label>

<label for="tab-2" class="label-tab">Spesifikasi</label>

<label for="tab-3" class="label-tab">Harga</label>

Panel pertama dapat digunakan untuk menjelaskan fitur produk, panel kedua untuk spesifikasi teknis, dan panel ketiga untuk informasi harga atau cara mendapatkan produk.

Cara Membuat Multi Tab untuk Tutorial

Multi tab juga dapat digunakan pada artikel tutorial Blogger, HTML, CSS, atau JavaScript.

Contohnya:

  • Persiapan untuk menjelaskan hal-hal yang diperlukan.
  • Langkah untuk menampilkan tutorial.
  • Kode untuk menampilkan script.

Penggunaan seperti ini dapat membantu memisahkan bagian tutorial berdasarkan jenis informasi yang ingin dibaca.

Cara Menambahkan Tab Lebih dari Tiga

Kode contoh di atas menggunakan tiga tab. Jika ingin membuat lebih banyak tab, Anda perlu menambahkan radio button, label, panel, dan selector CSS yang sesuai.

Misalnya untuk tab keempat:

<input type="radio" name="grup-tab" id="tab-4" class="input-tab" />

<label for="tab-4" class="label-tab">
  FAQ
</label>

<div class="panel-tab panel-4">
  Isi FAQ Anda di sini.
</div>

Kemudian tambahkan selector CSS:

#tab-4:checked ~ .panel-4 {
    display: block;
}

Anda juga perlu menambahkan selector untuk memberikan tampilan aktif pada label tab keempat.

Tips Membuat Multi Tab Responsif di Smartphone

Karena banyak pengunjung blog menggunakan smartphone, tampilan tab harus tetap nyaman digunakan pada layar kecil.

  • Gunakan ukuran font yang mudah dibaca.
  • Hindari nama tab yang terlalu panjang.
  • Gunakan padding yang proporsional.
  • Pastikan tab tidak menyebabkan halaman melebar.
  • Uji tampilan pada beberapa ukuran layar.

Jika jumlah tab terlalu banyak, tampilan pada smartphone dapat menjadi sempit. Untuk kondisi tersebut, Anda dapat mempertimbangkan desain navigasi yang lebih sesuai dengan kebutuhan konten.

Cara Mengubah Warna Tab

Warna tab dapat diubah melalui properti color dan background-color.

Contohnya:

.label-tab {
    background-color: #f8fafc;
    color: #64748b;
}

Warna tab aktif ditentukan oleh selector :checked:

#tab-1:checked ~ .label-tab[for="tab-1"] {
    color: #3b82f6;
    border-bottom: 3px solid #3b82f6;
}

Sesuaikan warna tersebut dengan identitas visual template Blogger Anda.

Cara Menghilangkan Animasi Tab

Jika Anda menginginkan tampilan yang lebih sederhana, animasi dapat dihapus dari bagian panel.

Hapus:

animation: munculHalus 0.4s ease-in-out;

Dengan demikian, panel akan muncul tanpa animasi tambahan.

Kesalahan yang Sering Terjadi Saat Membuat Multi Tab

1. Tab Tidak Bisa Diklik

Pastikan nilai for pada label sama persis dengan id radio button.

Contoh yang benar:

<input id="tab-1">

<label for="tab-1">Deskripsi</label>

Jika ID berbeda, label tidak akan mengaktifkan radio button yang sesuai.

2. Semua Panel Tidak Muncul

Periksa selector CSS antara ID radio button dan class panel. Contohnya:

#tab-1:checked ~ .panel-1 {
    display: block;
}

ID dan class tersebut harus sesuai dengan struktur HTML.

3. Tidak Ada Tab yang Aktif Saat Halaman Dibuka

Pastikan radio button pertama memiliki atribut:

checked="checked"

Atribut tersebut menentukan tab pertama sebagai pilihan awal.

4. Tampilan Tab Berantakan di Smartphone

Hal ini dapat terjadi karena nama tab terlalu panjang atau jumlah tab terlalu banyak. Gunakan label yang singkat dan lakukan pengujian pada perangkat mobile.

Apakah Multi Tab CSS Mempengaruhi SEO?

Penggunaan CSS untuk membuat tab tidak secara otomatis meningkatkan ranking SEO. CSS berfungsi terutama untuk mengatur tampilan dan interaksi visual pada halaman.

Yang lebih penting adalah bagaimana konten di dalam tab disusun dan apakah informasi tersebut tetap dapat diakses dengan baik oleh pengguna serta dipahami oleh mesin pencari.

Jangan menggunakan tab hanya untuk menyembunyikan informasi penting. Gunakan komponen ini ketika tab memang membantu mengelompokkan informasi yang saling berkaitan.

Tips SEO Saat Menggunakan Multi Tab di Blogger

  • Gunakan judul tab yang jelas dan deskriptif.
  • Masukkan konten yang benar-benar relevan pada setiap panel.
  • Hindari pengulangan kata kunci secara berlebihan.
  • Gunakan heading HTML yang sesuai di dalam panel jika diperlukan.
  • Pastikan konten tetap mudah digunakan pada smartphone.
  • Jangan mengorbankan informasi penting hanya demi tampilan ringkas.

FAQ Multi Tab CSS di Blogger

Apakah multi tab CSS bisa digunakan di Blogger?

Ya. Contoh multi tab ini menggunakan HTML dan CSS sehingga dapat diterapkan pada artikel atau halaman Blogger dengan menyesuaikan struktur template yang digunakan.

Apakah multi tab membutuhkan JavaScript?

Tidak untuk contoh ini. Perpindahan tab menggunakan radio button HTML dan selector CSS :checked.

Apakah multi tab dapat digunakan pada smartphone?

Ya. Namun, desain perlu dibuat responsif agar label tab tetap nyaman disentuh dan tidak menyebabkan halaman melebar pada layar kecil.

Apakah jumlah tab hanya bisa tiga?

Tidak. Contoh ini menggunakan tiga tab sebagai dasar. Anda dapat menambahkan tab lain dengan membuat radio button, label, panel, serta selector CSS tambahan.

Apakah isi tab bisa berupa kode HTML?

Ya. Panel tab dapat berisi berbagai elemen HTML yang sesuai, seperti paragraf, daftar, gambar, tautan, dan blok kode.

Apakah multi tab otomatis meningkatkan SEO?

Tidak. Multi tab merupakan komponen tampilan dan navigasi konten. Pengaruh terhadap SEO tidak otomatis muncul hanya karena menggunakan tab. Fokus tetap pada kualitas konten, struktur halaman, relevansi informasi, performa, dan pengalaman pengguna.

Kesimpulan

Cara membuat multi tab di Blogger menggunakan CSS saja dapat dilakukan dengan memanfaatkan kombinasi radio button HTML, label, panel konten, dan selector CSS :checked. Teknik ini memungkinkan Anda membuat navigasi tab tanpa membutuhkan JavaScript tambahan.

Multi tab cocok digunakan untuk mengelompokkan informasi seperti deskripsi, spesifikasi, ulasan, fitur, harga, tutorial, FAQ, dan informasi lainnya. Dengan pengelompokan yang tepat, konten dapat terlihat lebih terstruktur dan tidak memenuhi halaman secara vertikal.

Anda juga dapat mengubah warna, ukuran font, jarak, border, animasi, serta jumlah tab sesuai kebutuhan. Pastikan desain tetap responsif agar nyaman digunakan pada smartphone maupun desktop.

Yang paling penting, gunakan tab untuk membantu pengunjung menemukan informasi, bukan sekadar menyembunyikan konten. Dengan struktur HTML yang rapi dan desain CSS yang tepat, multi tab Blogger dapat menjadi komponen sederhana yang berguna untuk membuat artikel terlihat lebih terorganisir dan profesional.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!