Artikel: Halaman Dengan Tabmenu Tanpa Reload (SPA Style)

Tutorial membuat Halaman dengan Tabmenu Fixed Tanpa Reload (SPA Style) di Blogspot

Desain tabmenu bawah (bottom navigation) semakin populer pada website modern, terutama pada tampilan mobile. Banyak aplikasi seperti Instagram, Telegram, dan aplikasi crypto menggunakan navigasi tab di bagian bawah untuk berpindah tampilan tanpa perlu memuat ulang halaman (no reload). Kini, konsep tersebut dapat diterapkan juga pada halaman Blogspot.

Fungsi Tabmenu Tanpa Reload

Tabmenu jenis ini membuat setiap tab membuka tampilan yang berbeda, misalnya: Home, Fitur, Cara, dan Profil. Semua itu dilakukan tanpa memuat ulang halaman, karena setiap konten sebenarnya berada dalam satu halaman yang sama dan hanya di-switch dengan JavaScript.

Pergantian halaman cepat tanpa loading.
Lebih ringan karena semua konten berada dalam satu file HTML.
Cocok untuk mini app seperti Tap to Earn, Dashboard, Wallet, Task, dan lainnya.
Ramah mobile karena menu berada di bawah dan mudah dijangkau jempol.

Kelebihan

Menghasilkan pengalaman seperti aplikasi (SPA — Single Page Application).
Tanpa pindah halaman sehingga lebih cepat.
Menghemat kuota pengguna.
Desain lebih rapi dan modern.

Kekurangan

Semua konten berada dalam satu halaman sehingga ukuran HTML bisa menjadi lebih besar.
Tidak cocok untuk artikel panjang atau SEO karena konten yang muncul bergantung JavaScript.
Jika JavaScript mati, navigasi tidak berfungsi.

Cara Membuat Tabmenu Bawah Tanpa Reload di Blogspot

Ikuti langkah-langkah berikut untuk memasangnya:

Buka Blogger.
Buat postingan baru.
Ubah mode penulisan menjadi HTML.
Salin seluruh script di bawah dan tempelkan ke editor HTML.
Publikasikan.

Script Tabmenu Tanpa Reload (Siap Copy-Paste)

Berikut adalah script lengkapnya. Anda dapat menggunakan langsung di postingan blog.

<style>
  body {margin:0; font-family:Arial, sans-serif; background:#f5f5f5;}

  /* PAGE WRAPPER */
  .page {display:none; padding:20px;}
  .page.active {display:block;}

  /* TABMENU FIXED */
  .tabmenu {
    position:fixed; bottom:0; left:0; right:0;
    height:60px; background:#fff; border-top:1px solid #ddd;
    display:flex; justify-content:space-around; align-items:center;
    z-index:9999;
  }
  .tabmenu a {
    flex:1; text-align:center; padding:6px 0;
    font-size:14px; color:#444; text-decoration:none;
  }
  .tabmenu a.active {
    color:#000; font-weight:bold;
  }
</style>

<div id="home" class="page active">
  <h2>Home</h2>
  <p>Ini adalah tampilan halaman Home.</p>
</div>

<div id="fitur" class="page">
  <h2>Fitur</h2>
  <p>Tampilan halaman Fitur.</p>
</div>

<div id="cara" class="page">
  <h2>Cara</h2>
  <p>Penjelasan cara penggunaan.</p>
</div>

<div id="profil" class="page">
  <h2>Profil</h2>
  <p>Data profil atau kontak Anda.</p>
</div>

<!-- TAB MENU FIXED -->
<div class="tabmenu">
  <a href="#home" class="tab active">Home</a>
  <a href="#fitur" class="tab">Fitur</a>
  <a href="#cara" class="tab">Cara</a>
  <a href="#profil" class="tab">Profil</a>
</div>

<script>
  const tabs = document.querySelectorAll(".tabmenu .tab");
  const pages = document.querySelectorAll(".page");

  tabs.forEach(tab => {
    tab.addEventListener("click", function(e){
      e.preventDefault();

      // hilangkan active di semua tab
      tabs.forEach(t => t.classList.remove("active"));
      this.classList.add("active");

      // sembunyikan semua page
      pages.forEach(p => p.classList.remove("active"));

      // tampilkan page sesuai tab
      const target = this.getAttribute("href").replace("#","");
      document.getElementById(target).classList.add("active");
    });
  });
</script>

atau lihat kode script tabmenu fixed yang lainnya disini

Kesimpulan

Dengan tabmenu bawah tanpa reload, Anda dapat membuat halaman Blogspot terasa seperti aplikasi mobile modern. Fitur ini sangat cocok untuk dashboard, mini-app, tap to earn, menu wallet, dan halaman interaktif lainnya. Semua navigasi bekerja cepat karena hanya mengganti tampilan konten, bukan memuat ulang halaman.

Silakan modifikasi warna, ikon, atau animasi sesuai kebutuhan blog Anda.

Cara membuat Halaman Dengan Tabmenu Tanpa Reload (SPA Style)