Cara Membuat Multi Tab di Blog (CSS Saja)

Tabs HTML Blog CSS Only

Saya memakai multi tab CSS ini pada salah satu postingan di blog demo tema Fiksioner. Ternyata banyak juga yang menanyakan bagaimana cara membuatnya. Jadi kali ini saya akan membagikan cara untuk membuat banyak tab hanya pakai CSS.

Multi tab ini sudah lumrah dan umum digunakan di banyak blog. Kebanyakan diantaranya memakai bantuan Javascript. Namun versi saya tidak perlu memakai itu, melainkan cukup CSS saja jadi lebih ringan. Bukan berarti multi tab saya hanya satu-satunya yang pakai CSS ya. Di luar sana banyak juga kok. Saya hanya ingin berbagi script versi saya sendiri.

Multiple Tabs CSS Only

Cara membuat multiple tabs CSS ini bisa diaplikasikan tidak hanya di Blogger (Blogspot) saja, melainkan di semua platform ngeblog seperti WordPress dan lainnya.

Di blog demo tema Blogger gratis Fiksioner, tab ini hanya terdiri dari dua kotak. Namun kamu bisa menambahkannya lebih dari dua jika mengikuti tutorial berikut.

1. Tambahkan CSS

Perlu ditekankan bahwa tampilan dari multi tab ini berbeda dengan blog demo Fiksioner. Saya memakai tampilan yang umum agar lebih netral. Jika menguasai CSS, kamu bisa ubah sendiri tampilannya sesuai keinginan.

Simpan kode berikut pada pengaturan tema blog.

/* Multi Tabs CSS Only by igniel.com */
.ignielMultiTab {
  border: 0;
  margin: 1.5rem 0;
  padding: 0;
}
.ignielMultiTab input, .ignielMultiTab .content div {
  display: none;
}
.ignielMultiTab label, .ignielMultiTab .content {
  border-style: solid;
  border-width: 1px;
}
.ignielMultiTab input:checked + label, .ignielMultiTab .content {
  border-color: #ddd;
}
.ignielMultiTab .label {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: calc(100vw - 2.5rem);
  overflow: auto;
}
.ignielMultiTab label {
  background-color: #ededed;
  border-color: transparent;
  border-bottom: 1px solid #ddd;
  color: #666;
  cursor: pointer;
  display: inline-block;
  float: left;
  padding: .65rem 1.25rem;
  position: relative;
  top: 1px;
  transition: all .3s ease;
}
.ignielMultiTab input:checked + label {
  background-color: transparent;
  border-bottom: 1px solid #fff;
  color: #1d1d1d;
  font-weight: bold;
}
.ignielMultiTab .content {
  clear: both;
  padding: 1.5rem 1.25rem;
}

.ignielMultiTab #tab1:checked ~ .content .tab1,
.ignielMultiTab #tab2:checked ~ .content .tab2,
.ignielMultiTab #tab3:checked ~ .content .tab3,
.ignielMultiTab #tab4:checked ~ .content .tab4,
.ignielMultiTab #tab5:checked ~ .content .tab5 {
  display: block;
}

2. Buat Tabs

Salin kode ini ke dalam editor Blogger. Pastikan untuk memilih mode HTML, bukan Compose.

<!-- Multi Tabs CSS Only by igniel.com -->
<fieldset class="ignielMultiTab">
  
  <input id="tab1" name="mTab" type="radio" checked="checked"/>
  <label for="tab1">Satu</label>
  
  <input id="tab2" name="mTab" type="radio"/>
  <label for="tab2">Dua</label>
  
  <input id="tab3" name="mTab" type="radio"/>
  <label for="tab3">Tiga</label>
  
  <input id="tab4" name="mTab" type="radio"/>
  <label for="tab4">Empat</label>
  
  <input id="tab5" name="mTab" type="radio"/>
  <label for="tab5">Lima</label>
  
  <div class="content">
    
    <div class="tab1">
      (1) ISI SATU
    </div>
    <div class="tab2">
      (2) ISI DUA
    </div>
    <div class="tab3">
      (3) ISI TIGA
    </div>
    <div class="tab4">
      (4) ISI EMPAT
    </div>
    <div class="tab5">
      (5) ISI LIMA
    </div>
    
  </div>
</fieldset>
  1. Yang ditandai biru adalah judul dari tab.
  2. Yang ditandai merah adalah isi konten.

Untuk menghindari kesalahan, ada baiknya kamu tidak mengubah apapun kecuali yang sudah ditandai biru dan merah.

Perhatikan bahwa setiap id, for, dan class memiliki nama yang sama. Berarti mereka memiliki keterikatan. Sebagai contoh, tab1 berarti kode untuk tab kesatu. Pastikan kamu menuliskan judul dan konten yang tepat untuk ditampilkan di tab yang sesuai dengan nomornya.

3. Demo

Untuk hasil akhirnya, lihat contoh multi tabs berikut atau cek di Codepen saya.

(1) ISI SATU
(2) ISI DUA
(3) ISI TIGA
(4) ISI EMPAT
(5) ISI LIMA

Menambah Atau Mengurangi Jumlah Tab

Multi tab ini jumlahnya tidak terbatas hanya 5 buah seperti contoh saja. Kamu bisa mengurangi dan menambahkan sesuai keinginan.

1. Mengurangi

Untuk mengurangi jumlah tab, cukup hapus kode HTML dan sisakan sesuai jumlah yang diinginkan. Misalnya hanya ingin menampilkan 3 tab, maka kode HTML yang ditulis adalah sebagai berikut:

<!-- Multi Tabs CSS Only by igniel.com -->
<fieldset class="ignielMultiTab">
  
  <input id="tab1" name="mTab" type="radio" checked="checked"/>
  <label for="tab1">Satu</label>
  
  <input id="tab2" name="mTab" type="radio"/>
  <label for="tab2">Dua</label>
  
  <input id="tab3" name="mTab" type="radio"/>
  <label for="tab3">Tiga</label>
  
  <div class="content">
    
    <div class="tab1">
      (1) ISI SATU
    </div>
    <div class="tab2">
      (2) ISI DUA
    </div>
    <div class="tab3">
      (3) ISI TIGA
    </div>
    
  </div>
</fieldset>

2. Menambah

Jika ingin menambah jumlah tab, maka kode CSS pun harus ikut ditambahkan. Saya sendiri kurang yakin ada yang pakai sampai lebih dari 5. Itu sih kebanyakan dan bikin kelihatan tambah ramai. Tapi kalau tetap mau, salin kode berikut dan simpan di bawah kode CSS multi tab sebelumnya.

.ignielMultiTab #tab6:checked ~ .content .tab6, .ignielMultiTab #tab7:checked ~ .content .tab7 { 
  display: block;
}

Contoh di atas adalah untuk menambahkan menjadi 7 tab. Untuk setiap tab diberikan CSS baru sesuai dengan nomornya. Dalam kasus ini diberi nama tab6 dan tab7. Jika ingin menambahkan lebih banyak maka tambahkan lagi kodenya. Cukup salin dari kode yang sudah ada dan ganti yang ditandai sesuai nomor.

Setelah menambah CSS, penulisan di HTML pun bertambah. Tinggal salin dari kode HTML yang sudah ada lalu ganti id, for, dan class saja sesuai nomornya. Pastikan posisinya sesuai dengan yang saya contohkan.

<!-- Multi Tabs CSS Only by igniel.com -->
<fieldset class="ignielMultiTab">
  
  <!-- ini adalah kode HTML sebelumnya -->

  <input id="tab6" name="mTab" type="radio"/>
  <label for="tab6">Enam</label>

  <input id="tab7" name="mTab" type="radio"/>
  <label for="tab7">Tujuh</label>
  
  <div class="content">
    
    <!-- ini adalah kode HTML sebelumnya -->

    <div class="tab6">
      (6) ISI ENAM
    </div>
    <div class="tab7">
      (7) ISI TUJUH
    </div>
    
  </div>
</fieldset>

Maka hasil akhirnya harus persis seperti ini.

<!-- Multi Tabs CSS Only by igniel.com -->
<fieldset class="ignielMultiTab">
  
  <input id="tab1" name="mTab" type="radio" checked="checked"/>
  <label for="tab1">Satu</label>
  
  <input id="tab2" name="mTab" type="radio"/>
  <label for="tab2">Dua</label>
  
  <input id="tab3" name="mTab" type="radio"/>
  <label for="tab3">Tiga</label>
  
  <input id="tab4" name="mTab" type="radio"/>
  <label for="tab4">Empat</label>
  
  <input id="tab5" name="mTab" type="radio"/>
  <label for="tab5">Lima</label>

  <input id="tab6" name="mTab" type="radio"/>
  <label for="tab6">Enam</label>

  <input id="tab7" name="mTab" type="radio"/>
  <label for="tab7">Tujuh</label>
  
  <div class="content">
    
    <div class="tab1">
      (1) ISI SATU
    </div>
    <div class="tab2">
      (2) ISI DUA
    </div>
    <div class="tab3">
      (3) ISI TIGA
    </div>
    <div class="tab4">
      (4) ISI EMPAT
    </div>
    <div class="tab5">
      (5) ISI LIMA
    </div>
    <div class="tab6">
      (6) ISI ENAM
    </div>
    <div class="tab7">
      (7) ISI TUJUH
    </div>
    
  </div>
</fieldset>

Jika Judul Bertumpuk

Jika memasang 5 tab atau lebih dan mengalami tampilan judul yang bertumpuk saat dibuka di perangkat yang lebih kecil misalnya handphone seperti gambar berikut:

Multiple Tabs CSS Only

Solusinya adalah dengan menambahkan kode CSS ini bersamaan dengan kode CSS yang sudah ditambahkan sebelumnya.

@media screen and (max-width: 480px) {
  .ignielMultiTab label {
    padding: .65rem .95rem;
  }
}
@media screen and (max-width: 360px) {
  .ignielMultiTab label {
    font-size: .65rem;
    padding: .5rem .75rem;
  }
}

Sekian panduan lengkap untuk membuat multiple tabs CSS only ala igniel.com. Mudah-mudahan sedikit membantu dan bermanfaat.

Artikel Terkait

5 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • MayLa
    29 Mei, 2022
    Profil: https://www.blogger.com/profile/15644046891743524289
    mau tanya bang, kalo mau nambahin foto di salah satu tab nya kok ngga bisa ya, itu kenapa bang?
    • Igniel
      29 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sertakan screenshot dari kode dan hasilnya.
    • MayLa
      30 Mei, 2022
      Profil: https://www.blogger.com/profile/15644046891743524289
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglMQfIsh10ZWIyRzsw7-gzLyIKPGMFmnao-5OQclGniTx6THMi4B8hsNtmkj54cVe1ZY6N7Hir5TdOwohDWStilKRyqU-_symyrmLOJltjqVl-BrDSb7Y9-v0Lq8LBUzmS9HRaHppxqw34dZZ4xKlh5LV_ODBWqzyf0MB0u6ZJIsnpIUROyaD4bMJ1/s1506/contohnya.jpg
    • Igniel
      31 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Langsung aja tulis dari tag <img>, gak usah dari <div class="separator">.
  • Asep Rohimat
    10 Februari, 2022
    Profil: https://www.blogger.com/profile/13503791911000091655
    Sangat bermanfaat untuku