Cara Membuat "Full Page Tab" dengan HTML, CSS dan JavaScript

Kemarin kita sudah mempelajari tab horizontal, tab vertikal dan tab header, Kode-kode yang digunakan hanya dengan HTML, CSS dan JavaScript. Sedangkan praktek penerapannya seperti biasa menggunakan platform Blogger.

Dan sekarang kita lanjutkan pada pembahasan "Full Page Tab" yang secara tampilan mirip dengan tab header. Untuk tutorial sumber referensi juga masih tetap dari w3schools.com yang asalnya tidak dijelaskan untuk Blogspot.

Untuk itu, kode sumber tersebut kemudian diadaptasikan sesuai lingkungan Blogger agar bisa berjalan sebagaimana mestinya. Begitu juga apa yang akan kita lakukan terhadap kode-kode yang menghasilkan full page tab berikut ini.

Apa itu Full Page Tab?

"Full page tab" adalah elemen navigasi yang ketika diklik akan mengarahkan pengguna ke halaman baru yang tampilannya bisa berbeda. Dan melalui contoh yang kita praktekan nanti akan terlihat jelas perbedaannya.

Ilustrasinya begini: Ketika Anda mengklik full page tab tersebut, tampilan yang sedang Anda lihat akan digantikan dengan tampilan yang lainnya. Dan tampilan ini bisa berbeda sepenuhnya atau mungkin dengan tata letak dan konten yang berbeda.

Sedangkan "tab header" pada pembahasan sebelumnya adalah elemen navigasi yang biasanya tidak mengambil seluruh area atau hanya sebagian kecil dari tampilan untuk menunjukkan navigasi.

Sehingga, perbedaan utamanya adalah bahwa full page tab mengarahkan ke halaman atau tampilan baru yang tidak terkait dengan tampilan sebelumnya. Ini bisa berarti navigasi yang lebih tegas dan mengalihkan perhatian pengguna sepenuhnya ke konten atau fitur baru.

Namun perlu dicatat, istilah-istilah di atas ini dapat berbeda-beda tergantung pada siapa yang menggunakannya. Dan istilah ini mungkin tidak digunakan secara konsisten di seluruh industri.

Oleh karena itu, saat berbicara tentang "tab header" atau "full page tab" dalam konteks desain web, selalu pastikan untuk menyamakan pengertian dengan rekan-rekan Anda sesama blogger maupun web developer untuk menghindari kebingungan.

Cara Membuat Full Page Tab dengan HTML, CSS dan JavaScript

Setelah memahami apa yang dimaksud dengan full page tab. Pertanyaan selanjutnya adalah bagaimana cara membuatnya? Lalu apa yang harus kita lakukan jika kemudian memilih untuk tidak menggunakan framework maupun library JavaScript.

Padahal penerapan teknologi di atas biasanya memudahkan pengembangan web modern untuk menciptakan fitur "full page tab" yang responsif dan menarik.

Jawabannya silahkan simak artikel ini sampai habis. Karena di dalamnya akan dijelaskan langkah-langkah membuat full page tab hanya dengan HTML, CSS dan JavaScript. Dan contoh pembuktiannya menggunakan platform Blogger yang gratis.

Cara Membuat Full Page Tab pada Template Blogspot

Cara membuat full page tab pada template blogspot tidak jauh berbeda dengan platform lainnya. Apalagi kode yang digunakan dengan HTML, CSS dan JavaScript. Tapi mungkin butuh sedikit penyesuaian saja agar kode diletakan dengan benar.

Dan berikut ini tutorial selengkapnya tentang cara membuat full page tab.

1. Template Dasar Blogspot Sendiri dari Nol

Gunakan template dasar sendiri dari nol seperti di bawah ini. Tempate ini terdiri atas kode-kodenya yang masih sedikit sehingga mudah untuk dipelajari. Selain itu agar kita fokus dalam memahami kode khusus yang menghasilkan full page tab.

<?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

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

<button class='tablink' onclick='openPage('Home', this, 'red')'>Home</button> <button class='tablink' id='defaultOpen' onclick='openPage('News', this, 'green')'>News</button> <button class='tablink' onclick='openPage('Contact', this, 'blue')'>Contact</button> <button class='tablink' onclick='openPage('About', this, 'orange')'>About</button> <div class='tabcontent' id='Home'> <h3>Home</h3> <p>Home is where the heart is..</p> </div> <div class='tabcontent' id='News'> <h3>News</h3> <p>Some news this fine day!</p> </div> <div class='tabcontent' id='Contact'> <h3>Contact</h3> <p>Get in touch, or swing by for a cup of coffee.</p> </div> <div class='tabcontent' id='About'> <h3>About</h3> <p>Who we are and what we do.</p> </div>

Kode di atas akan menghasilkan halaman web sebagai berikut:

3. Menambahkan CSS

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

/* Set height of body and the document to 100% to enable "full page tabs" */ body, html { height: 100%; margin: 0; font-family: Arial; } /* Style tab links */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } .tablink:hover { background-color: #777; } /* Style the tab content (and add height:100% for full page content) */ .tabcontent { color: white; display: none; padding: 100px 20px; height: 100%; } #Home {background-color: red;} #News {background-color: green;} #Contact {background-color: blue;} #About {background-color: orange;}

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

4. Menambahkan kode JavaScript

Agar berfungsi, tambahkan kode JavaScript ini sebelum tag </body>.

Setelah itu klik "Save" untuk menyimpan perubahan pada template.

Kemudian klik icon "reload current page" pada browser Anda yang menghasilkan halaman web seperti ini:

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

Klik judul yang berada di sebelahnya sehingga akan terlihat seperti ini.

Begitu juga ketika klik judul yang berada di sebelah kanan.

Penutup

Dengan memanfaatkan HTML, CSS, dan JavaScript, Anda dapat menciptakan pengalaman pengguna yang menarik melalui fitur "Full Page Tab". Elemen navigasi ini dapat meningkatkan tingkat interaksi pengguna dan mendorong mereka untuk menjelajahi lebih dalam terkait konten yang disajikan.

Sebagaimana contoh praktikum di atas dengan kode HTML untuk mengatur struktur, CSS untuk memberikan tampilan yang estetis, dan JavaScript untuk menciptakan transisi yang mulus.

Anda dapat menghadirkan "Full Page Tab" yang responsif dan menawan sehingga berpotensi meraih peringkat yang lebih baik di hasil pencarian. Akhir kata kami hanya bisa mengucapkan.

"Selamat belajar, mari kembangkan kemampuan dengan menciptakan pengalaman web yang mengesankan. Salah satunya adalah dengan mengembangkan baris kode Full Page Tab yang telah dibuat di atas."

Semoga bermanfaat.