Cara Mudah Membuat Multi Tab Di Blog Menggunakan CSS

4 min read

Cara Mudah Membuat Multi Tab di Blog Menggunakan CSS

Di era digital yang serba cepat ini, membuat blog yang menarik dan informatif sangatlah penting untuk menarik perhatian pembaca. Salah satu cara untuk meningkatkan pengalaman pengguna dan membuat blog Anda lebih mudah dinavigasi adalah dengan menambahkan multi tab.

Multi tab memungkinkan Anda membagi konten Anda ke dalam beberapa kategori atau bagian, sehingga pembaca dapat dengan mudah menemukan informasi yang mereka cari. Ini juga dapat membantu Anda mengatur konten Anda secara logis dan membuat blog Anda terlihat lebih profesional.

Dalam artikel ini, kita akan membahas cara membuat multi tab di blog Anda menggunakan Cascading Style Sheets (CSS). CSS adalah bahasa pemrograman yang digunakan untuk mengontrol tampilan dan tata letak halaman web.

Langkah 1: Buat Struktur HTML

Langkah pertama adalah membuat struktur HTML dasar untuk tab Anda. Ini akan melibatkan pembuatan wadah untuk tab dan kontennya. Berikut adalah contoh kode HTML:

<div class="tabs">
  <ul class="tab-links">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1">Konten Tab 1</div>
    <div id="tab2">Konten Tab 2</div>
    <div id="tab3">Konten Tab 3</div>
  </div>
</div>

Dalam kode ini, kita telah membuat wadah <div> dengan kelas "tabs". Di dalam wadah ini, kita memiliki daftar <ul> dengan kelas "tab-links" yang berisi tautan ke setiap tab. Kita juga memiliki wadah <div> dengan kelas "tab-content" yang berisi konten untuk setiap tab.

Langkah 2: Gaya Tab Menggunakan CSS

Setelah Anda memiliki struktur HTML, Anda dapat menggunakan CSS untuk mengatur gaya tab Anda. Berikut adalah contoh kode CSS:

.tabs {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}

.tab-links {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab-links li {
  margin-right: 20px;
}

.tab-links a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  border: 1px solid #ccc;
}

.tab-links a:hover {
  background-color: #eee;
}

.tab-content {
  width: 100%;
  margin-top: 20px;
}

.tab-content div {
  display: none;
}

.tab-content div.active {
  display: block;
}

Dalam kode ini, kita telah mengatur gaya wadah tab, daftar tautan tab, tautan tab individual, dan konten tab. Kita telah menggunakan CSS Flexbox untuk menyelaraskan tautan tab di tengah, dan kita telah menambahkan beberapa gaya dasar seperti warna, batas, dan bantalan.

Langkah 3: Tambahkan Fungsionalitas JavaScript

Langkah terakhir adalah menambahkan fungsionalitas JavaScript untuk mengontrol tab. Ini akan melibatkan pengalihan konten tab yang sesuai saat pengguna mengklik tautan tab. Berikut adalah contoh kode JavaScript:

const tabLinks = document.querySelectorAll('.tab-links a');
const tabContent = document.querySelectorAll('.tab-content div');

tabLinks.forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();

    const tabId = link.getAttribute('href');
    const tabContentElement = document.querySelector(tabId);

    tabLinks.forEach(link => {
      link.classList.remove('active');
    });

    tabContent.forEach(content => {
      content.classList.remove('active');
    });

    link.classList.add('active');
    tabContentElement.classList.add('active');
  });
});

Dalam kode ini, kita telah memilih semua tautan tab dan konten tab menggunakan querySelectorAll(). Kita kemudian menambahkan event listener ke setiap tautan tab yang akan diaktifkan saat pengguna mengkliknya. Di dalam event listener, kita mendapatkan ID tab dari tautan dan memilih elemen konten tab yang sesuai.

Kita kemudian menghapus kelas "active" dari semua tautan tab dan konten tab yang ada, dan menambahkan kelas "active" ke tautan tab yang diklik dan konten tab yang sesuai. Ini akan menampilkan konten tab yang dipilih dan menyembunyikan konten tab lainnya.

Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda dapat dengan mudah membuat multi tab di blog Anda menggunakan CSS dan JavaScript. Ini adalah cara yang bagus untuk meningkatkan pengalaman pengguna, mengatur konten Anda, dan membuat blog Anda terlihat lebih profesional.

Jangan ragu untuk menyesuaikan kode yang disediakan sesuai dengan kebutuhan dan preferensi Anda. Dengan sedikit kreativitas, Anda dapat membuat tab yang bergaya dan fungsional yang akan membuat blog Anda menonjol.

Tanya Jawab Cara Membuat Multi Tab di Blog (Hanya CSS)

1. Apa itu tab?
Tab adalah elemen navigasi yang memungkinkan pengguna beralih dengan mudah di antara beberapa bagian konten pada satu halaman web.

2. Mengapa menggunakan CSS untuk membuat tab?
CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengontrol tampilan dan tata letak halaman web. Menggunakan CSS untuk membuat tab memungkinkan Anda menyesuaikan tampilan dan nuansa tab sesuai keinginan Anda.

3. Bagaimana cara membuat tab dengan CSS?
Untuk membuat tab dengan CSS, Anda perlu membuat daftar tidak berurutan (

Leave a Reply

Your email address will not be published. Required fields are marked *