✍️ Kode Script untuk Membuat Halaman dengan Tabmenu Bawah Fixed
Contoh Halaman dengan Tabmenu Bawah Fixed dan kode script
Kode Script untuk Membuat Halaman dengan Tabmenu Bawah Fixed
Artikel ini menjelaskan cara kerja desain tab menu bawah yang tetap (fixed) — ideal untuk navigasi cepat pada tampilan mobile. Kode HTML berikut bisa langsung Anda tempel pada postingan Blogspot (mode HTML).
1. Konsep & Kapan Digunakan
Tab menu bawah sering dipakai di aplikasi mobile atau situs yang fokus pada pengalaman pengguna lewat navigasi cepat antar fitur — seperti Beranda, Pencarian, Notifikasi, Profil, dan Wallet.
2. Kelebihan
Memudahkan akses jempol (thumb-friendly)
Menghemat ruang header; navigasi selalu terlihat
Cocok untuk single-page navigation dengan anchor
3. Cara Pasang di Blogspot
Buka posting baru di Blogger -> pilih tab HTML.
Salin seluruh kode HTML di bawah (mulai dari tag <!-- TABMENU --> sampai akhir) lalu tempel ke editor HTML postingan Anda.
Simpan dan lihat hasilnya pada perangkat mobile (atau gunakan preview responsive di browser).
4. Tips Kustomisasi
Untuk mengubah warna, ganti nilai background/box-shadow pada kelas .tab--active atau ubah ikon SVG dengan gambar/icon favorit Anda.
Contoh Penggunaan (Navigasi Antar Bagian)
Scroll ke bawah lalu gunakan tab menu untuk berpindah antar bagian: Home, Fitur, Cara Pasang, dan Kontak.
Home
Ini adalah area konten utama. Anda dapat memasukkan teks, gambar, ataupun widget lainnya sesuai kebutuhan.
Fitur
Deskripsi fitur aplikasi atau website Anda.
Cara Pasang
Petunjuk singkat memasang pada platform Blogspot.
Kontak
Isi informasi kontak singkat: WhatsApp, Email, atau link lainnya.
klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Bottom Tabs Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
padding-bottom: 50px; /* Memberikan ruang di bawah konten untuk tab yang tetap */
}
.header {
background-color: #007bff;
color: white;
text-align: center;
padding: 20px;
}
.content {
padding: 20px;
margin-bottom: 60px; /* Memberikan ruang untuk konten tab */
}
.tabs {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-around;
background-color: #f1f1f1;
border-top: 1px solid #ddd;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
.tab {
flex: 1;
padding: 15px;
text-align: center;
cursor: pointer;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-bottom: none;
transition: background-color 0.3s;
}
.tab:hover {
background-color: #ddd;
}
.tab.active {
background-color: white;
border-bottom: 2px solid white;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="header">
<h1>My Blog</h1>
</div>
<div class="content">
<div id="home" class="tab-content">
<h2>Home</h2>
<p>Welcome to the home tab.</p>
</div>
<div id="about" class="tab-content">
<h2>About</h2>
<p>Information about us.</p>
</div>
<div id="contact" class="tab-content">
<h2>Contact</h2>
<p>Contact details here.</p>
</div>
</div>
<div class="tabs">
<div class="tab" onclick="showTab('home')">Home</div>
<div class="tab" onclick="showTab('about')">About</div>
<div class="tab" onclick="showTab('contact')">Contact</div>
</div>
<script>
function showTab(tabId) {
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// Remove 'active' class from all tabs
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
});
// Show the selected tab content
document.getElementById(tabId).classList.add('active');
// Mark the selected tab as active
const activeTab = Array.from(document.querySelectorAll('.tab')).find(tab => tab.textContent.trim().toLowerCase() === tabId);
if (activeTab) {
activeTab.classList.add('active');
}
}
// Show the first tab by default
showTab('home');
</script>
</body>
</html>
Komentar untuk Kode Script untuk Membuat Halaman dengan Tabmenu Bawah Fixed