Cara Membuat "Tab Headers" dengan HTML, CSS dan JavaScript

Kemarin kita belajar membuat tab horizontal dan tab vertikal. Sebuah elemen interaktif yang memudahkan pengunjung untuk melihat konten lain tanpa harus membuka halaman baru atau memuat ulang halaman yang sedang diakses.

Sekarang kita memasuki pembahasan selanjutnya tentang cara membuat tab headers. Adapun teknologi yang digunakan masih tetap menggunakan kombinasi kode antara HTML, CSS, dan JavaScript.

Sedangkan tutorial sumber juga masih tetap dari w3schools.com yang diadaptasi sesuai lingkungan Blogger. Siap dengan materi desain web kali ini? Kita mulai dengan pengenalan tentang tab headers terlebih dahulu.

Apa itu Tab Headers?

Dalam desain web, "tab header" mengacu pada elemen antarmuka pengguna yang digunakan untuk menyajikan dan mengelompokkan konten dalam bentuk tab. Tab header biasanya terletak di bagian atas atau sisi halaman web dan terdiri dari beberapa tab yang dapat diklik.

Setiap tab pada tab header mewakili konten atau bagian yang berbeda dari halaman web. Ketika pengguna mengklik salah satu tab, konten yang terkait dengan tab tersebut ditampilkan di area konten yang sesuai di bawah atau di sebelah tab header.

Penggunaan tab header sangat umum dalam navigasi situs web yang memiliki banyak halaman atau bagian yang ingin disajikan secara terorganisir. Ini memungkinkan pengguna untuk beralih antara konten yang berbeda dengan mudah tanpa harus menggulir atau membuka halaman baru.

Tab header biasanya dilengkapi dengan beberapa interaksi, seperti perubahan warna atau tampilan tab saat diklik untuk menunjukkan tab yang aktif, serta animasi atau transisi yang halus saat pengguna mengganti tab.

Dalam desain web responsif, tab header sering kali berubah menjadi menu drop-down atau ikon tab kecil pada perangkat seluler atau layar dengan lebar terbatas untuk mengakomodasi tampilan yang lebih sempit.

Cara Membuat Tab Headers dengan HTML, CSS dan JavaScript

Membuat tab headers biasa dilakukan dengan kombinasi HTML, CSS dan JavaScript. Meskipun banyak juga tutorial desain web yang menulis penjelasannya menggunakan framework atau library JavaScript.

Dan pada tutorial di bawah ini kita akan mencoba cara membuat tab headers dengan HTML, CSS dan JavaScript. Adapun penerapannya seperti biasa akan diintegrasikan dengan template blogspot yang dibuat dari nol.

Cara Membuat Tab Headers pada Template Blogspot

Oleh karena itu, pada pertemuan ini kita akan membahas tentang cara membuat tab headers dengan HTML, CSS dan JavaScript yang akan kita terapkan pada platform Blogger dengan sedikit penyesuaian.

1. Template Dasar Blogspot Sendiri dari Nol

Untuk menyeragamkan pembelajaran, gunakan 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 Tab Headers"

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

<div class='tabcontent' id='London'> <h1>London</h1> <p>London is the capital city of England.</p> </div> <div class='tabcontent' id='Paris'> <h1>Paris</h1> <p>Paris is the capital of France.</p> </div> <div class='tabcontent' id='Tokyo'> <h1>Tokyo</h1> <p>Tokyo is the capital of Japan.</p> </div> <div class='tabcontent' id='Oslo'> <h1>Oslo</h1> <p>Oslo is the capital of Norway.</p> </div> <button class='tablink' id='defaultOpen' onclick='openCity('London', this, 'red')'>London</button> <button class='tablink' onclick='openCity('Paris', this, 'green')'>Paris</button> <button class='tablink' onclick='openCity('Tokyo', this, 'blue')'>Tokyo</button> <button class='tablink' onclick='openCity('Oslo', this, 'orange')'>Oslo</button>

Kode di atas akan menghasilkan halaman web sebagai berikut:

3. Menambahkan CSS untuk Merubah Gaya "Tab Headers"

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

/* Style the tab buttons */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } /* Change background color of buttons on hover */ .tablink:hover { background-color: #777; } /* Set default styles for tab content */ .tabcontent { color: white; display: none; padding: 50px; text-align: center; } /* Style each tab content individually */ #London {background-color:red;} #Paris {background-color:green;} #Tokyo {background-color:blue;} #Oslo {background-color:orange;}

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

4. Menambahkan kode JavaScript

Tampilan halaman web di atas belum menghasilkan apa pun ketika kita mengklik tulisan atau judul yang terlihat. Agar konten terkait bisa terlihat silahkan letakan kode di bawah ini sebelum tag </body>.

Setelah itu klik "Simpan" untuk menyimpan perubahan pada template. Hasilnya, ketika kita muat ulang halaman di atas akan terlihat seperti ini:

Dan ketika kita klik salah satu judulnya akan memperlihatkan konten yang ada didalamnya seperti terlihat pada gambar di bawah ini.

Penutup

Dengan menggunakan tab headers, pengguna dapat mengakses tab-tab navigasi tanpa perlu membuka halaman baru. Dan tab headers tersebut bisa kita buat hanya dengan menggunakan tiga teknologi dasar.

Yaitu kode HTML untuk membangun struktur dasar halaman web serta input masukan. Kemuian CSS untuk mengatur tampilan visual. Dan terakhir, JavaScript untuk mengolah input dari user lalu mengaktifkan fungsi tab-tab tersebut.

Demikian langkah-langkah yang diperlukan untuk membuat tab headers dengan menggunakan HTML, CSS dan JavaScript pada template Blogger.

Semoga bermanfaat.