Cara Membuat Menu Tab View Dinamis di Blogger dengan Ikon Menampilkan Postingan Label

[Show]

Menu tab view adalah fitur navigasi modern yang dapat meningkatkan pengalaman pengguna di blog Anda. Dengan fitur ini, pengunjung bisa berpindah antar kategori dengan mudah tanpa perlu membuka halaman berbeda.

Berikut adalah artikel tutorial lengkap tentang cara membuat menu tab view di Blogger, beserta penjelasan setiap bagian kode dan langkah-langkah penempatannya

✨ Fitur Utama:

Menampilkan tab berdasarkan label (kategori) blog.
Setiap tab menampilkan posting terbaru dari label tersebut.
Disertai ikon Font Awesome di tiap tab.
Terdapat kredit © AdinJava kecil di bawah (wajib untuk penggunaan gratis).
Proteksi otomatis jika kredit dihapus, maka fitur akan nonaktif.

🛠️ Langkah-langkah Pemasangan

1. Masuk ke Dashboard Blogger Anda

Buka https://www.blogger.com, pilih blog Anda, lalu masuk ke menu Tata Letak atau langsung ke Tema > Edit HTML (jika ingin memasukkan manual).

2. Tambahkan HTML Menu Tab

Buka bagian tempat Anda ingin menampilkan menu (misalnya di halaman postingan atau widget), lalu salin dan tempel kode berikut:

<!-- Menu Tab dan Kontennya -->
<div class="tab-buttons modern-tab">
  <button class="tab-btn active" data-target="label-tutorial"><i class="fas fa-graduation-cap"></i> Tutorial</button>
  <button class="tab-btn" data-target="label-blogger"><i class="fab fa-blogger-b"></i> Blogger</button>
  <button class="tab-btn" data-target="label-komputer"><i class="fas fa-laptop-code"></i> Komputer</button>
  <button class="tab-btn" data-target="label-info"><i class="fas fa-info-circle"></i> Info</button>
  <button class="tab-btn" data-target="label-wordpress"><i class="fab fa-wordpress"></i> Wordpress</button>
  <button class="tab-btn" data-target="label-tipsponsel"><i class="fas fa-mobile-alt"></i> Tips Ponsel</button>
</div>

<div class="tab-content modern-tab-content">
  <div class="tab-panel active" id="label-tutorial"><ul></ul></div>
  <div class="tab-panel" id="label-blogger"><ul></ul></div>
  <div class="tab-panel" id="label-komputer"><ul></ul></div>
  <div class="tab-panel" id="label-info"><ul></ul></div>
  <div class="tab-panel" id="label-wordpress"><ul></ul></div>
  <div class="tab-panel" id="label-tipsponsel"><ul></ul></div>
</div>

<!-- Kredit Wajib -->
<div id="adinjava-credit" style="text-align:center; font-size:9px; margin-top:10px; opacity:0.5;">
  &copy; <a href="https://adinjava.blogspot.com" target="_blank" style="text-decoration:none; color:inherit;">AdinJava</a>
</div>

3. Tambahkan CSS untuk Tampilan Tab

Letakkan di dalam tag <style> di atas widget atau di bagian <head> tema:

<style>
/* Style Tab Modern */
.modern-tab {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.modern-tab .tab-btn {
  padding: 8px 12px;
  background: #6a6a6a;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modern-tab .tab-btn.active {
  background: #007BFF;
}
.tab-content .tab-panel {
  display: none;
}
.tab-content .tab-panel.active {
  display: block;
}
.tab-panel ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tab-panel ul li {
  margin-bottom: 6px;
}
.tab-panel ul li a {
  text-decoration: none;
  color: #0f77b7;
}
.tab-panel ul li a:hover {
  color: #007BFF;
}
</style>

4. Tambahkan Font Awesome (Ikon)

Tambahkan di bagian <head>:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/>

5. Tambahkan JavaScript Pengontrol

Letakkan di bawah semua elemen tab (paling bawah halaman atau widget):

<script>
//<![CDATA[
(function () {
  const btns = document.querySelectorAll(".tab-btn");
  const panels = document.querySelectorAll(".tab-panel");

  btns.forEach(btn => {
    btn.addEventListener("click", function () {
      btns.forEach(b => b.classList.remove("active"));
      panels.forEach(p => p.classList.remove("active"));
      this.classList.add("active");
      document.getElementById(this.dataset.target).classList.add("active");
    });
  });

  // Cek Kredit
  setTimeout(() => {
    if (!document.getElementById("adinjava-credit")) {
      document.querySelectorAll(".tab-btn").forEach(btn => btn.disabled = true);
      document.querySelectorAll(".tab-panel").forEach(panel => {
        panel.innerHTML = "<p style='color:red;text-align:center;'>Kredit telah dihapus. Fitur nonaktif.</p>";
      });
    }
  }, 2000);
})();

function loadLabelPosts(label, containerId, maxResults) {
  const script = document.createElement('script');
  script.src = `/feeds/posts/default/-/${label}?alt=json-in-script&callback=function_${containerId}&max-results=${maxResults}`;
  document.body.appendChild(script);
}

function buildList(entries) {
  let list = '';
  for (let i = 0; i < entries.length; i++) {
    const title = entries[i].title.$t;
    const link = entries[i].link.find(l => l.rel === "alternate").href;
    list += `<li><a href="${link}">📌 ${title}</a></li>`;
  }
  return list;
}

// Callback per label
function function_label_tutorial(json) {
  document.querySelector('#label-tutorial ul').innerHTML = buildList(json.feed.entry || []);
}
function function_label_blogger(json) {
  document.querySelector('#label-blogger ul').innerHTML = buildList(json.feed.entry || []);
}
function function_label_komputer(json) {
  document.querySelector('#label-komputer ul').innerHTML = buildList(json.feed.entry || []);
}
function function_label_info(json) {
  document.querySelector('#label-info ul').innerHTML = buildList(json.feed.entry || []);
}
function function_label_wordpress(json) {
  document.querySelector('#label-wordpress ul').innerHTML = buildList(json.feed.entry || []);
}
function function_label_tipsponsel(json) {
  document.querySelector('#label-tipsponsel ul').innerHTML = buildList(json.feed.entry || []);
}

// Load semua label
loadLabelPosts('Tutorial', 'label_tutorial', 5);
loadLabelPosts('Blogger', 'label_blogger', 5);
loadLabelPosts('Komputer', 'label_komputer', 5);
loadLabelPosts('Info', 'label_info', 5);
loadLabelPosts('Wordpress', 'label_wordpress', 5);
loadLabelPosts('Tips Ponsel', 'label_tipsponsel', 5);
//]]>
</script>

📌 Bagian yang Bisa Diubah

Bagian	Fungsi	Bisa Diubah
`data-target="label-..."`	ID target tab	✅ Ya
`loadLabelPosts('NamaLabel')`	Nama label Blogger	✅ Ya
Jumlah post (`maxResults`)	Jumlah post per tab	✅ Ya
Ikon Font Awesome	Tampilan ikon tab	✅ Ya
Kredit AdinJava	Wajib tetap ada	❌ Tidak boleh dihapus

🔒 Proteksi Kredit

Jika elemen <div id="adinjava-credit">...</div> dihapus, maka seluruh tab akan otomatis nonaktif. Ini adalah syarat penggunaan gratis dan membantu backlink untuk pengembang.

✅ Kesimpulan

Menu tab ini sangat berguna untuk:

Menampilkan banyak kategori tanpa membuat halaman terpisah
Mempercantik tampilan blog
Meningkatkan pengalaman pengguna

Jika Anda membutuhkan versi tanpa proteksi, versi premium tanpa backlink, atau ingin menambahkan fitur load lebih banyak, slide otomatis, atau transisi animasi, Anda bisa hubungi saya kapan saja.