Cara Bikin Halaman Sitemap di Blogspot yang Interaktif, SEO Friendly, dan Anti Ribet

BeniSubianto.web.id - Di kebun sawit, kita kenal prinsip dasar: panen rapi, jalan produksi lancar. Di dunia blogspot juga sama. Salah satu “jalan produksi” penting itu adalah halaman sitemap di blogspot. Tanpa sitemap, pengunjung dan mesin pencari bisa nyasar kayak truk TBS masuk parit.

Di artikel ini, saya akan bahas cara bikin halaman sitemap menggunakan script yang sudah saya siapkan. Kita kupas step by step, gaya petani tapi mindset developer template. Santai, tapi tetap production ready.

Target kita jelas: halaman sitemap yang cepat, rapi, interaktif, dan SEO friendly. KPI tercapai, bounce rate turun, bot-crawler Google senyum.

---

Apa Itu Halaman Sitemap di Blogspot?

Secara sederhana, sitemap adalah daftar semua postingan di blog kamu. Tapi bukan sekadar daftar asal-asalan.

Dengan halaman sitemap di blogspot yang baik:

• Pengunjung gampang cari artikel lama
• Google lebih cepat merayapi konten
• Struktur blog terlihat profesional
• UX naik kelas, bukan blog kaleng-kaleng

Ibarat kebun: sitemap itu peta blok. Tanpa peta, mandor bingung, panen bisa berantakan.

---

Kenapa Harus Bikin Sitemap Custom, Bukan Default?

Blogspot memang punya sitemap XML bawaan. Tapi itu konsumsi mesin, bukan manusia.

Kalau tujuan kamu:

• Meningkatkan SEO on-page
• Membuat halaman sitemap enak dilihat
• Menyediakan filter kategori
• Menampilkan postingan terbaru (NEW badge)

Maka cara bikin sitemap manual dengan script seperti ini adalah best practice. Ini sudah masuk level custom solution, bukan template bawaan.

---

Fitur Unggulan Script Sitemap Ini

Sebelum masuk ke teknis, kita align dulu ekspektasi bersama. Script ini bukan sitemap biasa.

• Auto fetch postingan dari feed Blogspot
• Grouping berdasarkan label/kategori
• Dropdown filter kategori
• Pagination (biar gak berat)
• Badge 'NEW'+animasi untuk artikel terbaru
• Dark mode friendly
• Skeleton loading biar UX smooth

Kalau ini sawit, sudah masuk kategori intensifikasi, bukan kebun asal tumbuh.

---

Step 1: Buat Halaman Baru di Blogspot

Masuk ke Dashboard Blogger → Pages / Halaman → Klik New Page.

Judul halaman bisa kamu pakai:

• Sitemap Blog
• Daftar Artikel
• Peta Situs
• Daftar Isi

Judul tidak terlalu berpengaruh SEO, yang penting kontennya solid.

---

Step 2: Ubah Mode ke Tampilan HTML

Di editor halaman, klik ikon pensil → pilih Tampilan HTML.

Ini penting. Jangan tempel script di mode compose, nanti berantakan kayak kebun tanpa piringan.

---

Step 3: Tempel Script Sitemap

Salin seluruh script yang sudah kamu siapkan, mulai dari:

• CSS Tag <style>

  <style>
    :root{
    --bg: var(--body-bg,#fff);
    --text: var(--body-color,#222);
    --border: rgba(0,0,0,.15);
    --accent: var(--theme-color,#16a34a);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --border: rgba(255,255,255,.15);
    }
  }
  
  #sitemap{max-width:720px;margin:auto}
  select{padding:8px;width:100%;margin:15px 0}
  
  .sitemap-category{margin-bottom:25px}
  .category-box{
    display:flex;align-items:center;gap:6px;
    border:1px solid var(--border);
    padding:6px 10px;border-radius:6px;
    font-weight:600;margin-bottom:8px
  }
  .category-box svg{width:16px;height:16px;fill:currentColor}
  
  ul{padding-left:18px}
  li{margin:6px 0}
  .post-date{opacity:.7;font-size:.9em}
  .badge-new{
    margin-left:6px;
    background:#ef4444;color:#fff;
    font-size:.7em;padding:2px 6px;
    border-radius:10px;
    animation:pulse 1.4s infinite
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}
    70%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
    100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
  }
  
  #pagination{
    display:flex;gap:6px;
    justify-content:center;margin:20px 0
  }
  #pagination button{
    padding:6px 10px;
    border:1px solid var(--border);
    background:transparent;
    border-radius:6px;
    cursor:pointer
  }
  #pagination button[disabled]{opacity:.4;cursor:not-allowed}
  #pagination button[aria-current]{background:var(--accent);color:#fff}
  
  .skeleton{
    height:14px;background:linear-gradient(90deg,#eee,#ddd,#eee);
    margin:6px 0;border-radius:4px;
    animation:load 1.2s infinite
  }
  @keyframes load{
    0%{background-position:-200px}
    100%{background-position:200px}
  }
  </style>
  

• HTML struktur sitemap

  <div id="sitemap">
    <select id="labelSelect" aria-label="Filter kategori"></select>
    <div id="content"></div>
    <div id="pagination" role="navigation" aria-label="Navigasi halaman"></div>
  </div>

• JS Tag <script>

  <script>
  const POSTS_PER_PAGE = 50; /* Jumlah artikel ditampilkan */
  const MAX_PAGES = 5; /* Jumlah maksimal tombol page */
  const NEW_DAYS = 7; /* Umur artikel baru */
  
  let allLabels = {};
  let currentLabel = "all";
  let currentPage = 1;
  
  const content = document.getElementById("content");
  const pagination = document.getElementById("pagination");
  const select = document.getElementById("labelSelect");
  
  /* Skeleton */
  function showSkeleton(){
    content.innerHTML="";
    for(let i=0;i<4;i++){
      content.innerHTML += '<div class="skeleton"></div>';
    }
  }
  
  /* Date */
  function formatDate(d){
    const x=new Date(d);
    return `${String(x.getDate()).padStart(2,"0")}/${String(x.getMonth()+1).padStart(2,"0")}/${x.getFullYear()}`;
  }
  
  /* Fetch */
  fetch("/feeds/posts/default?alt=json&max-results=150")
  .then(r=>r.json())
  .then(data=>{
    data.feed.entry.forEach(e=>{
      const title=e.title.$t;
      const url=e.link.find(l=>l.rel==="alternate").href;
      const date=new Date(e.published.$t);
      const labels=e.category?e.category.map(c=>c.term):["Tanpa Label"];
  
      labels.forEach(l=>{
        allLabels[l]=allLabels[l]||[];
        allLabels[l].push({title,url,date});
      });
    });
  
    buildSelect();
    render();
  });
  
  /* Select */
  function buildSelect(){
    select.innerHTML='<option value="all">Semua Kategori</option>';
    Object.keys(allLabels).sort().forEach(l=>{
      select.innerHTML+=`<option value="${l}">${l}</option>`;
    });
  
    select.onchange=()=>{
      currentLabel=select.value;
      currentPage=1;
      showSkeleton();
      setTimeout(render,300);
    };
  }
  
  /* Render */
  function render(){
    content.innerHTML="";
    pagination.innerHTML="";
  
    if(currentLabel==="all"){
      Object.entries(allLabels).forEach(([l,p])=>{
        content.appendChild(buildCategory(l,p));
      });
      return;
    }
  
    const posts=allLabels[currentLabel]||[];
    const start=(currentPage-1)*POSTS_PER_PAGE;
    const slice=posts.slice(start,start+POSTS_PER_PAGE);
  
    content.appendChild(buildCategory(currentLabel,slice));
    buildPagination(posts.length);
  }
  
  /* Category */
  function buildCategory(label,posts){
    const wrap=document.createElement("div");
    wrap.className="sitemap-category";
  
    wrap.innerHTML=`
      <div class="category-box">
        <svg viewBox="0 0 24 24"><path d="M9 3L7.5 9H3v3h3.8L5.5 21h3l1.5-6h4l-1.5 6h3l1.5-6H21v-3h-3.8L18.5 3h-3l-1.5 6h-4l1.5-6H9z"/></svg>
        ${label}
      </div>
      <ul></ul>`;
  
    const ul=wrap.querySelector("ul");
  
    posts.forEach(p=>{
      const isNew=(new Date()-p.date)/86400000<=NEW_DAYS;
      ul.innerHTML+=`
        <li>
          <a href="${p.url}">${p.title}</a>
          <span class="post-date"> – ${formatDate(p.date)}</span>
          ${isNew?'<span class="badge-new">NEW</span>':''}
        </li>`;
    });
  
    return wrap;
  }
  
  /* Pagination (MAX 5) */
  function buildPagination(total){
    const pages=Math.ceil(total/POSTS_PER_PAGE);
    if(pages<=1)return;
  
    const start=Math.max(1,currentPage-2);
    const end=Math.min(pages,start+MAX_PAGES-1);
  
    const prev=document.createElement("button");
    prev.textContent="Prev";
    prev.setAttribute("aria-label","Halaman sebelumnya");
    prev.disabled=currentPage===1;
    prev.onclick=()=>{currentPage--;render()};
    pagination.appendChild(prev);
  
    for(let i=start;i<=end;i++){
      const b=document.createElement("button");
      b.textContent=i;
      b.setAttribute("aria-label","Halaman "+i);
      if(i===currentPage)b.setAttribute("aria-current","page");
      b.onclick=()=>{currentPage=i;render()};
      pagination.appendChild(b);
    }
  
    const next=document.createElement("button");
    next.textContent="Next";
    next.setAttribute("aria-label","Halaman berikutnya");
    next.disabled=currentPage===pages;
    next.onclick=()=>{currentPage++;render()};
    pagination.appendChild(next);
  }
  </script>

Tempel utuh di halaman HTML secara berurutan <style> - <html> - <script>. Jangan dipotong-potong. Ini satu paket, satu sistem.

Secara arsitektur, script ini bekerja dengan cara:

• Mengambil feed postingan Blogspot (JSON)
• Mengelompokkan berdasarkan label
• Merender ulang dalam bentuk sitemap interaktif

Ini bukan sulap, tapi logika JavaScript yang rapi.

---

Step 4: Simpan dan Publish Halaman

Setelah script ditempel, klik Publish.

Buka halaman sitemap kamu. Kalau tampil rapi, berarti deployment sukses. Kalau kosong, cek:

• Apakah blog punya postingan?
• Apakah feed Blogspot aktif?
• Apakah ada error JS di browser?
• Apakah kode sudah di-copy dengan benar?

Tenang, 90% kasus biasanya karena typo kecil.

---

Cara Kerja Filter Kategori di Sitemap

Dropdown kategori di bagian atas itu bukan hiasan.

Fungsinya:

• Memudahkan pengunjung mencari artikel spesifik
• Mengurangi scrolling berlebihan
• Meningkatkan UX dan waktu kunjungan

Secara teknis, script akan membaca semua label postingan, lalu otomatis membuat opsi filter. Jadi kalau kamu tambah label baru, sitemap ikut update. Ini namanya low maintenance system.

---

Pagination: Kenapa Penting untuk SEO?

Sitemap tanpa pagination itu berat. Apalagi kalau postingan sudah ratusan. Semakin mudah pembaca kamu mencari artikel yang dicarinya, semakin betah pula mereka di website kamu.

Fungsi Pagination di script ini:

• Membatasi 50 postingan per halaman*
• Maksimal 5 tombol halaman*
• Ringan dan ramah mobile

Hasilnya?

Loading cepat, user happy, Google juga happy. Win-win solution.

* Angka dapat diubah sesuai kebutuhan

---

Badge NEW: Kecil Tapi Berdampak

Badge 'New' pada sitemap

Label 'NEW' untuk artikel terbaru itu sederhana, tapi efeknya besar.

• Menarik perhatian pengunjung
• Mendorong klik ke konten baru
• Membantu distribusi trafik internal

Ini strategi internal linking halus, tanpa maksa. Dalam dunia korporat, ini disebut conversion booster.

---

Penutup

Dengan mengikuti tutorial ini, kamu sudah paham cara bikin halaman sitemap yang bukan cuma tampil, tapi bekerja maksimal.

Script ini cocok untuk:

• Blog personal
• Blog niche
• Blog edukasi
• Publisher kecil-menengah

Sebagai petani yang nyemplung ke dunia blog, kita belajar satu hal: mau di kebun atau di internet, sistem yang rapi itu kunci utama berkelanjutan.

Kalau sitemap sudah beres, tinggal fokus produksi konten. Biar blog terus tumbuh, seperti sawit yang dirawat konsisten. 🌴