Tutorial Lengkap: Cara Memasang “Modern Tab View” di Blogspot untuk Label Hanya Judul

[Show]

Ingin mempercantik blogspot Anda dengan menu tab yang modern, elegan, dan mobile-friendly? Ikuti langkah demi langkah tutorial ini untuk memasang Modern Tab View yang otomatis menampilkan judul-judul artikel berdasarkan label Blogger. Kita akan menggunakan satu widget HTML/Javascript yang berisi HTML, CSS, dan JavaScript sekaligus.

📌 1. Persiapan

Pastikan Anda sudah membuat label pada setiap postingan Blogger:
- Label “Tutorial” untuk tab Tutorial
- Label “Blogger” untuk tab Blogger
- Label “Komputer” untuk tab Komputer
- Label “Info” untuk tab Info
Feed Blog:
- Masuk ke Setelan → Lainnya → Izinkan Feed Blog
- Pilih Penuh atau Singkat (jangan “Tidak ada”)

📌 2. Salin Kode Lengkap

Copy–paste satu blok kode ini ke Gadget HTML/Javascript di Tata Letak Blogger.

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

<!-- Tab Buttons -->
<div class="tab-buttons modern-tab">
  <button class="tab-btn active" data-target="label-tutorial"><i class="fas fa-comments"></i> Tutorial</button>
  <button class="tab-btn" data-target="label-blogger"><i class="fas fa-list"></i> Blogger</button>
  <button class="tab-btn" data-target="label-komputer"><i class="fas fa-laptop"></i> Komputer</button>
  <button class="tab-btn" data-target="label-info"><i class="fas fa-info-circle"></i> Info</button>
</div>

<!-- Tab Content -->
<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>

<!-- CSS -->
<style>
.modern-tab {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  margin-bottom: 12px;
  padding-bottom: 6px;
}
.modern-tab::-webkit-scrollbar {
  height: 5px;
}
.modern-tab::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.modern-tab .tab-btn {
  padding: 8px 14px;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  transition: background .3s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  scroll-snap-align: start;
}
.modern-tab .tab-btn:hover { background: #e0e0e0; }
.modern-tab .tab-btn.active {
  background: #007BFF;
  color: #fff;
}
.modern-tab .tab-btn i { font-size: 14px; }

.tab-content .tab-panel { display: none; }
.tab-content .tab-panel.active { display: block; }

.tab-panel ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.tab-panel ul li {
  margin: 6px 0;
}
.tab-panel ul li a {
  text-decoration: none;
  color: #333;
  transition: color .2s;
}
.tab-panel ul li a:hover {
  color: #007BFF;
}

/* Mobile tweak */
@media (max-width: 600px) {
  .modern-tab-content { padding: 0 6px; }
}
</style>

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

  btns.forEach(function(b){
    b.addEventListener('click', function(){
      btns.forEach(function(x){ x.classList.remove('active') });
      panels.forEach(function(p){ p.classList.remove('active') });

      this.classList.add('active');
      document.getElementById(this.dataset.target).classList.add('active');
    });
  });
})();

function loadLabelPosts(label, containerId, maxResults) {
  var s = document.createElement('script');
  s.src = '/feeds/posts/default/-/' + encodeURIComponent(label)
        + '?alt=json-in-script&callback=cb_' + containerId
        + '&max-results=' + maxResults;
  document.body.appendChild(s);
}

function buildList(entries) {
  var h = '';
  entries = entries || [];
  for (var i = 0; i < entries.length; i++) {
    var e = entries[i];
    var title = e.title.$t;
    var url   = e.link.find(function(l){ return l.rel==='alternate' }).href;
    h += '<li><a href="'+ url +'">'+ title +'</a></li>';
  }
  return h;
}

// Callback functions
function cb_label_tutorial(json) {
  document.querySelector('#label-tutorial ul').innerHTML =
    buildList(json.feed.entry);
}
function cb_label_blogger(json) {
  document.querySelector('#label-blogger ul').innerHTML =
    buildList(json.feed.entry);
}
function cb_label_komputer(json) {
  document.querySelector('#label-komputer ul').innerHTML =
    buildList(json.feed.entry);
}
function cb_label_info(json) {
  document.querySelector('#label-info ul').innerHTML =
    buildList(json.feed.entry);
}

// Load feeds
loadLabelPosts('Tutorial',    'label_tutorial', 5);
loadLabelPosts('Blogger',     'label_blogger',  5);
loadLabelPosts('Komputer',    'label_komputer', 5);
loadLabelPosts('Info',        'label_info',     5);
//]]>
</script>

📋 3. Penjelasan Singkat

HTML: Tombol tab dengan data-target="label-xxx" menunjuk ke <div id="label-xxx">.
CSS:
- overflow-x: auto; white-space: nowrap; membuat tab scrollable horizontal di mobile.
- Warna, hover, dan animasi sederhana untuk UX yang halus.
JS:
- Menangani klik tab: menambah/membuang class active.
- Memuat feed label via JSONP, lalu membangun daftar <li> berisi judul artikel.

✅ 4. Cara Pasang di Blogspot

Login → Tata Letak
Klik “Tambahkan Gadget” → pilih HTML/Javascript
Pada kotak konten, paste seluruh kode di atas
Simpan dan Refresh halaman blog

Selesai! 🎉 Sekarang blog Anda memiliki Modern Tab View otomatis menampilkan judul postingan per label, elegan, responsive, dan mudah diatur. Selamat mencoba! 🚀