Cara Membuat "Hover Tabs" dengan HTML, CSS dan JavaScript

"Hover Tabs" adalah fitur menarik yang dapat meningkatkan interaktivitas dan pengalaman pengguna. Ketika kursor mouse di atas tab maka tampilan yang terlihat akan berubah dengan sebuah preview yang informatif.

Tampilan ini bisa menjadi daya tarik sebuah informasi sebelum pengguna memutuskan untuk mengkliknya. Oleh karena itu, kami ketengahkan bahasan menarik yang diambil dari w3schools.com.

Dalam artikel ini, kami adaptasikan tutorial tersebut dengan platform Blogger. Tidak perlu khawatir jika Anda masih pemula dalam dunia desain web. Karena tutorial ini dijelaskan untuk pemula dan dengan subdomain .blogspot gratisan.

Yuk simak pembahasan ini tentang cara membuat hover tabs dengan HTML, CSS, dan JavaScript pada platform Blogger.

Apa itu Hover Tabs?

Hover tabs adalah tab yang memiliki efek visual interaktif ketika pengguna mengarahkan kursor mouse ke atasnya. Tampilan seperti ini mirip dengan mega menu meskipun keduanya memiliki pendekatan yang berbeda dalam desain web.

Jadi, ketika pengguna mengarahkan kursor ke atas tab, tab tersebut dapat berubah warna, bentuk, atau menampilkan animasi untuk menunjukkan status atau memberikan umpan balik visual kepada pengguna.

Efek tersebut biasa dikenal dengan sebutan "hover" atau melayang. Dengan menggunakan ini, desainer web dapat meningkatkan interaktivitas dan memberikan pengalaman pengguna yang lebih menarik.

Fitur ini juga membantu mengkomunikasikan kepada pengguna bahwa elemen tersebut dapat diinteraksikan. Sehingga dapat meningkatkan navigasi dan penggunaan situs web secara keseluruhan.

Contoh sederhana dari "hover tabs" dalam desain web adalah saat pengguna mengarahkan kursor ke atas tab di menu navigasi. Tab yang dihover dapat berubah warna latar belakang atau teksnya, sehingga menyoroti tab yang aktif atau memberikan indikasi visual tentang tab mana yang akan dipilih jika diklik.

Penerapan hover tabs dapat bervariasi tergantung pada desain dan gaya situs web tertentu. Desainer web dapat menggunakan CSS (Cascading Style Sheets) untuk menciptakan efek hover pada elemen tab, seperti menggunakan pseudo-class ":hover" untuk mengatur perubahan gaya ketika pengguna mengarahkan kursor ke atas tab.

Secara keseluruhan, "hover tabs" adalah fitur desain web yang memungkinkan interaksi dan memberikan umpan balik visual kepada pengguna saat mengarahkan kursor ke atas tab, membantu meningkatkan navigasi dan pengalaman pengguna dalam menjelajahi situs web.".

Cara Membuat Hover Tabs dengan HTML, CSS dan JavaScript

Melalui artikel kali ini kami akan memandu Anda melalui tahap pembuatan elemen tab, styling menggunakan CSS untuk efek "hover" yang menarik, dan bagaimana mengintegrasikan JavaScript untuk mengaktifkan tooltip atau informasi tambahan saat pengguna mengarahkan kursor ke atas tab.

Menariknya, hover tabs yang akan kita praktekan kali ini menggunakan kombinasi kode HTML, CSS dan JavaScript yang diadaptasikan pada lingkungan Blogger. Sehingga, bahasan ini sangat direkomendasikan bagi Anda yang memiliki ketertarikan untuk membuat template blogger sendiri dari nol.

Langsung saja, berikut ini pembahasan selengkapnya tentang cara membuat hover tabs dengan HTML, CSS dan JavaScript yang disematkan pada template blogger.

Cara Membuat Hover Tabs pada Template Blogspot

Cara membuat hover tabs pada template blogspot ini tidaklah sesulit seperti apa yang kita bayangkan. Karena yang kita butuhkan hanya cukup melakukan 3 langkah saja. Dan berikut adalah contoh terapannya di template blogger dasar yang dibuat sendiri dari nol. Dan bagi Anda yang ingin menerapkan sendiri pada template yang sudah ada tinggal sesuaikan saja.

1. Template Dasar Blogspot Sendiri dari Nol

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

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

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

Kode di atas akan menghasilkan halaman web sebagai berikut:

3. Menambahkan CSS

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

/* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px; } /* Style the buttons that are used to open the tab content */ .tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px; display: none; }

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

4. Menambahkan kode JavaScript

Sebagaimana Anda lihat dan rasakan pada praktikum kali ini. Ketika berhasil menambahkan kode HTML dan CSS. Maka, judul yang terlihat pada tabs tersebut tidak menunjukan informasi yang tersimpan di dalamnya.

Oleh karena itu, 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:

5. Perbaikan Kode CSS

Kita lihat, tampilan halaman web di atas tidak sama dengan tutorial sumber. Karena memang apa yang dipraktekan harus disesuaikan dengan lingkungan blogger. Beda halnya jika kode HTML, CSS dan JavaScript di atas dibuat pada file tersendiri. Jadi bukan disematkan pada file template blogger dengan ekstensi .xml.

Untuk itu, agar tampilan halaman web pada praktek kali ini sama dengan hasil yang diperlihatkan pada tutorial sumber. Maka, pada kode CSS yang tertulis di atas harus ada revisi atau perbaikan.

Dan perbaikan tersebut terletak pada kode CSS bagian: /* Style the tab content */. Silahkan ubah nilai lebarnya dari 100% menjadi 60% = "width: 68%;". Sehingga kode CSS keseluruhannya pada nomor 3 di atas silahkan ganti dengan kode ini:

/* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px; } /* Style the buttons that are used to open the tab content */ .tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 68%; border-left: none; height: 300px; display: none; }

Setelah itu klik "Save" untuk menyimpan perubahan pada template blogger. Kini hasil yang terlihat pada halaman web sama dengan tutorial sumber.

Penutup

Dalam artikel ini, telah dijelaskan cara membuat "Hover Tabs" dengan menggunakan HTML, CSS, dan JavaScript. Dengan panduan langkah demi langkah yang diberikan. Anda bisa melakukan praktikum secara langsung pada template blogspot yang menjadi bahan pembelajaran.

Dan dengan memanfaatkan efek "hover" pada elemen tab, Anda telah belajar bagaimana menciptakan tampilan yang menarik dan memberikan umpan balik visual kepada pengguna saat mengarahkan kursor ke atas tab. Selain itu, dengan integrasi JavaScript, Anda dapat menampilkan tooltip atau informasi tambahan yang berguna untuk memperkaya pengalaman pengguna.

"Hover Tabs" tidak hanya meningkatkan navigasi situs web, tetapi juga memberikan sentuhan kreatif dan modern pada desain Anda. Anda dapat memanfaatkan potensi fitur ini untuk meningkatkan visibilitas konten dan memudahkan pengunjung dalam mengeksplorasi lebih dalam.

Sekarang, dengan pengetahuan yang Anda miliki, jangan ragu untuk mencoba berbagai variasi dan kustomisasi dalam implementasi "Hover Tabs" sesuai dengan kebutuhan dan gaya desain situs Anda. Teruslah bereksperimen dan tingkatkan kemampuan Anda dalam menciptakan desain web yang menarik dan interaktif.

Selamat berkarya.