Cara Membuat "Tabs" dengan HTML, CSS dan JavaScript

Pernahkah melihat kategori produk di situs web toko online? Bagaimana cara membuatnya? Apakah bisa diterapkan pada platform Blogger? Ini mungkin beberapa pertanyaan yang muncul di benak kita.

Melalui pertemuan kali ini kita akan membahas terkait itu. Tapi tentu saja yang akan dipelajari adalah dasar-dasarnya. Dan ini masih dalam bingkai pembahasan HTML, CSS dan JavaScript.

Anda tertarik untuk mengikutinya? Berikut ini tutorial membuat tabs untuk blogspot yang diadaptasi w3schools.com. Seperti biasa kita akan mempraktekannya pada subdomain .blogspot.

Apa itu Tabs?

Tab dikenal sebagai elemen antarmuka pengguna yang memungkinkan untuk beralih antara beberapa set konten. Ini mengacu pada elemen interaktif untuk menampilkan konten secara terorganisir dalam suatu halaman web.

Contoh nyata terlihat pada kategori produk dalam sebuah toko online. Dan bisa juga berupa tampilan berbeda dari data dalam aplikasi. Misalnya, ketika pengguna mengklik suatu tab maka konten yang ditampilkan di area konten berubah secara dinamis sesuai dengan tab yang dipilih.

Tab biasanya ditempatkan di bagian atas atau bawah halaman web dan berisi judul konten yang dapat diakses. Untuk beralih ke konten tab yang berbeda, pengguna dapat mengklik judul tab atau menggunakan tombol panah kiri dan kanan.

Tab adalah cara yang efisien untuk menampilkan sejumlah besar konten di area yang relatif kecil. Fitur ini merupakan cara yang bagus untuk mengorganisir konten dan membuatnya lebih mudah dinavigasi.

Cara Membuat Tabs dengan HTML, CSS dan JavaScript

Dalam desain web, tabs sering kali diimplementasikan dengan menggunakan kombinasi HTML, CSS, dan JavaScript. Namun beberapa framework dan library JavaScript telah tersedia tinggal pasang untuk mempermudah penggunaan tabs.

Dan kali ini kita coba cara pertama menggunakan kombinasi HTML, CSS dan JavaScript. Sedangkan prakteknya kita coba terapkan pada mesin Blogger.

Cara Membuat Tabs pada Template Blogspot

Tujuan utama dari penggunaan tabs adalah untuk menyajikan konten yang terkait secara terpisah namun masih terhubung secara logis dalam satu halaman. Sehingga pengguna dengan mudah beralih antara informasi yang satu dengan yang lain tanpa harus membuka halaman baru atau memuat ulang halaman.

1. Template Dasar Blogspot Sendiri dari Nol

Seperti biasa kita menggunakan template dasar sendiri dari nol seperti di bawah ini.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='main' showaddelement='yes'/> </body> </html>

2. Menambahkan Kode HTML "Toggleable Tabs"

Letakan kode HTML di bawah ini setelah tag <body> atau sebelum tag </body>.

<div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div>  <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div>

Kode di atas akan menghasilkan halaman web sebagai berikut:

3. Menambahkan CSS untuk Merubah Gaya "Tabs"

Letakan kode CSS di bawah sebelum tag "]]></b:skin>".

/* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; }

Kode di atas akan merubah halaman web di atas menjadi sebagai berikut:

4. Menambahkan kode JavaScript

Letakan kode di bawah ini sebelum tag </body>.

Setelah itu klik "Simpan" untuk menyimpan perubahan pada template. Hasilnya, ketika kita klik salah satu judulnya maka akan keluar konten yang ada di dalamnya.

5. Menambahkan CSS "Fade in Tabs"

Jika ingin menambahkan efek fade in, tambahkan kode CSS sebelumnya dengan kode di bawah ini sebelum tag ]]></b:skin>. Dengan efek ini konten yang terlihat ketika pengguna mengklik judul maka konten akan muncul tidak dengan secara mendadak melainkan terlihat halus sehingga terlihat elok.

.tabcontent { animation: fadeEffect 1s; /* Fading effect takes 1 second */ } /* Go from zero to full opacity */ @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }

6. Menambahkan Tab Default

Ketika halaman web pertama kali terbuka bagaimana caranya jika kita ingin ada salah satu tab yang sudah terbuka dengan sendirinya tanpa klik alias sudah menjadi default?

Cara ini bisa dengan dua langkah, yaitu menentukan tab yang akan dijadikan default. Pada contoh ini misalnya kode nomor 2 di atas ganti baris kode ini. Silahkan cari kodenya pada bagian :

<button class='tablinks' onclick='openCity(event, 'London')'>London</button>

Dengan kode yang di bawah ini atau bisa juga dengan menyisipkan kode "id='defaultOpen' sebagaimana terlihat pada contoh di bawah.

<button class='tablinks' id='defaultOpen' onclick='openCity(event, 'London')'>London</button>

Setelah itu tambahkan kode JavaScript di bawah ini di bawah kode JavaScript sebelumnya atau sebelum tag akhir </body>.

Hasilnya, ketika halaman web pertama kali dibuka akan terlihat konten "London" atau sesuai yang Anda tentukan akan terbuka secara default.

7. Menutup Tab

Area konten pada contoh di atas bisa terlihat namun belum bisa ditutup. Agar bisa diclose maka bisa dilakukan dengan cara sebagai berikut. Perhatikan kode pada bagian .

<div class='tabcontent' id='London'> <h3>London</h3> <p>London is the capital city of England.</p> </div>

Sisipkan kode: <span onclick='this.parentElement.style.display='none''>x</span> sehingga kodenya menjadi sebagai berikut:

<div class='tabcontent' id='London'> <h3>London</h3> <p>London is the capital city of England.</p> <span onclick='this.parentElement.style.display='none''>x</span> </div>

Dengan cara ini, pada tab tersebut disertai icon (x) yang ketika klik akan menutup konten yang ditampilkan.

Penutup

Dalam artikel ini, kita telah membahas cara membuat "Tabs" dengan HTML, CSS, dan JavaScript. Contoh penerapannya sengaja menggunakan platform Blogspot. Selain bersifat gratis untuk siapa pun, platform ini bisa dijadikan sarana untuk mendapatkan uang online.

Dan dengan pengembangan lebih lanjut kita bisa membuat tabs yang lebih baik. Intinya ada 3 bagian; kode HTML untuk membuat kerangka dasar dari "Tabs", CSS untuk mendesain tampilan agar menarik. Dan terakhir, JavaScript untuk menambahkan fungsi interaktif pada "Tabs".

Dengan menggabungkan ketiga komponen di atas kita dapat membuat "Tabs" yang dapat disesuaikan sesuai kebutuhan proyek. Sehingga pengguna dapat beralih antara tab dengan mudah dan melihat konten yang relevan secara langsung.

Demikian, semoga bermanfaat.