Membuat Sitemap Blogger Responsif dengan Tab Kategori, Pagination & Tombol Copy

Oleh Majid Abana Segaf Agustus 09, 2026 Posting Komentar

Kalau blog Blogger kamu sudah memiliki banyak artikel, menyediakan sitemap atau daftar artikel menjadi salah satu hal yang cukup penting. Pengunjung bisa lebih mudah menemukan artikel lama, sementara struktur konten blog juga menjadi lebih rapi.

Masalahnya, sitemap bawaan Blogger biasanya terlihat cukup sederhana. Kalau jumlah artikel sudah puluhan bahkan ratusan, daftar artikel yang terlalu panjang juga bisa membuat halaman terasa kurang nyaman untuk digunakan.

Nah, pada tutorial kali ini saya akan membagikan script sitemap Blogger responsif yang tampilannya jauh lebih modern. Sitemap ini dilengkapi dengan kategori berbentuk tab, pagination, jumlah artikel, tanggal publikasi, loading indicator, navigasi tab horizontal, dan desain responsive untuk desktop maupun smartphone.

Script ini juga menggunakan Blogger Feed API untuk mengambil daftar artikel secara otomatis, sehingga kamu tidak perlu memasukkan judul artikel satu per satu.

Kenapa Menggunakan Sitemap Blogger Ini?

Sitemap ini bukan sekadar daftar judul artikel biasa. Ada beberapa fitur yang membuatnya lebih nyaman digunakan:

Responsive untuk desktop, tablet, dan smartphone.
Artikel otomatis dimuat dari Blogger Feed.
Artikel dikelompokkan berdasarkan label/kategori.
Tab kategori dapat digeser pada layar kecil.
Pagination sehingga tidak menampilkan ratusan artikel sekaligus.
Menampilkan tanggal publikasi artikel.
Dapat menampilkan thumbnail jika diaktifkan.
Dapat menampilkan ringkasan artikel.
Dapat memberikan label "Baru!" pada artikel terbaru.
Memiliki loading indicator ketika artikel sedang dimuat.
Memiliki sistem error handling jika Feed Blogger gagal diakses.
Jumlah artikel ditampilkan secara otomatis.

Tampilan Sitemap yang Lebih Rapi

Konsep sitemap ini dibuat seperti navigasi kategori. Misalnya blog kamu memiliki kategori Technology, Blogging, Android, Tips, SEO, dan lain sebagainya. Setiap kategori akan otomatis menjadi sebuah tab.

Pengunjung cukup memilih kategori yang diinginkan, kemudian daftar artikel pada kategori tersebut akan ditampilkan tanpa perlu membuka halaman baru.

Selain itu, jika satu kategori memiliki lebih dari 50 artikel, artikel berikutnya akan otomatis masuk ke halaman pagination berikutnya.

Fitur Pagination

Secara default script ini menampilkan 50 artikel per halaman. Jumlah tersebut bisa kamu ubah melalui konfigurasi:

postsPerPage: 50

Misalnya ingin menampilkan 25 artikel per halaman, cukup ubah menjadi:

postsPerPage: 25

Cara Memasang Sitemap di Blogger

Untuk memasangnya sebenarnya cukup mudah. Kamu hanya perlu membuat sebuah halaman statis khusus untuk sitemap.

1. Buat Halaman Sitemap

Masuk ke dashboard Blogger, kemudian pilih:

Halaman → Halaman Baru

Beri judul misalnya:

Sitemap

Setelah itu ubah editor Blogger ke mode HTML.

2. Masukkan Script Sitemap

Salin seluruh script yang tersedia di bawah ini kemudian tempelkan ke halaman sitemap dalam mode HTML.

Penting: bagian konfigurasi blogUrl harus disesuaikan dengan alamat blog kamu.

var CONFIG = {
  blogUrl: 'https://www.fairusmajid.com',
  containerId: 'tabbed-toc',
  postsPerPage: 50,
  feedBatchSize: 150
};

Kalau alamat blog kamu berbeda, ganti bagian tersebut dengan alamat blog milikmu.

Full Script Sitemap Blogger

Berikut adalah full script yang bisa langsung kamu salin. Kotak kode di bawah sudah dibuat scrollable, sehingga tidak membuat halaman artikel menjadi terlalu panjang secara horizontal. Tersedia juga tombol Copy Script untuk mempermudah proses copy-paste.

<div class="tabbed-toc" id="tabbed-toc">
  <div class="toc-loading">
    Memuat semua artikel...
  </div>
</div>

<script>
(function () {
  'use strict';

  var CONFIG = {
    blogUrl: 'https://www.fairusmajid.com',
    containerId: 'tabbed-toc',

    postsPerPage: 50,

    feedBatchSize: 150,

    showDates: true,

    showSummaries: false,
    numChars: 160,

    showThumbnails: false,
    thumbSize: 60,

    newTabLink: false,

    sortAlphabetically: true,

    showNew: false,
    newDays: 7,

    monthNames: [
      'Januari',
      'Februari',
      'Maret',
      'April',
      'Mei',
      'Juni',
      'Juli',
      'Agustus',
      'September',
      'Oktober',
      'November',
      'Desember'
    ]
  };

  var container =
    document.getElementById(
      CONFIG.containerId
    );

  if (!container) return;

  var ALL_ENTRIES = [];
  var CATEGORIES = {};
  var CATEGORY_NAMES = [];

  var currentCategory = 0;
  var currentPage = 1;
  var loading = false;

  function escapeHTML(text) {
    return String(text || '')
      .replace(/&/g, '&')
      .replace(/</g, '<')
      .replace(/>/g, '>')
      .replace(/"/g, '"')
      .replace(/'/g, ''');
  }

  function stripHTML(text) {
    var div =
      document.createElement('div');

    div.innerHTML = text || '';

    return (
      div.textContent ||
      div.innerText ||
      ''
    );
  }

  function truncateText(text, length) {
    text =
      String(text || '').trim();

    if (text.length <= length) {
      return text;
    }

    return (
      text.substring(0, length).trim() +
      '…'
    );
  }

  function getTitle(entry) {
    if (
      entry &&
      entry.title &&
      entry.title.$t
    ) {
      return entry.title.$t;
    }

    return 'Tanpa Judul';
  }

  function getDate(entry) {
    if (
      entry &&
      entry.published &&
      entry.published.$t
    ) {
      return entry.published.$t;
    }

    return '';
  }

  function getURL(entry) {
    if (
      !entry ||
      !entry.link
    ) {
      return '#';
    }

    for (
      var i = 0;
      i < entry.link.length;
      i++
    ) {
      if (
        entry.link[i].rel === 'alternate'
      ) {
        return entry.link[i].href;
      }
    }

    return '#';
  }

  function formatDate(dateString) {
    if (
      !CONFIG.showDates ||
      !dateString
    ) {
      return '';
    }

    var date =
      new Date(dateString);

    if (
      isNaN(date.getTime())
    ) {
      return '';
    }

    var day =
      String(
        date.getDate()
      ).padStart(2, '0');

    var month =
      CONFIG.monthNames[
        date.getMonth()
      ];

    var year =
      date.getFullYear();

    return (
      '<time datetime="' +
      escapeHTML(
        date.toISOString()
      ) +
      '">' +
      day +
      ' ' +
      month +
      ' ' +
      year +
      '</time>'
    );
  }

  function isNewPost(dateString) {
    if (
      !CONFIG.showNew ||
      !dateString
    ) {
      return false;
    }

    var postDate =
      new Date(dateString);

    if (
      isNaN(
        postDate.getTime()
      )
    ) {
      return false;
    }

    var now =
      new Date();

    var difference =
      (
        now.getTime() -
        postDate.getTime()
      ) /
      (1000 * 60 * 60 * 24);

    return (
      difference >= 0 &&
      difference <= CONFIG.newDays
    );
  }

  function getThumbnail(entry) {
    if (
      !CONFIG.showThumbnails
    ) {
      return '';
    }

    if (
      entry &&
      entry['media$thumbnail'] &&
      entry['media$thumbnail'].url
    ) {
      var imageURL =
        entry['media$thumbnail'].url
          .replace(
            /\/s\d+(-c)?\//,
            '/s' +
            CONFIG.thumbSize +
            '-c/'
          );

      return (
        '<img class="toc-thumbnail" ' +
        'src="' +
        escapeHTML(imageURL) +
        '" ' +
        'alt="" ' +
        'width="' +
        CONFIG.thumbSize +
        '" ' +
        'height="' +
        CONFIG.thumbSize +
        '" ' +
        'loading="lazy" ' +
        'decoding="async">'
      );
    }

    return '';
  }

  function sortPosts(posts) {
    return posts.sort(
      function (a, b) {

        var dateA =
          new Date(
            getDate(a)
          ).getTime();

        var dateB =
          new Date(
            getDate(b)
          ).getTime();

        return dateB - dateA;
      }
    );
  }

  function addEntries(entries) {
    if (
      !entries ||
      !entries.length
    ) {
      return;
    }

    entries.forEach(
      function (entry) {

        var id =
          entry.id &&
          entry.id.$t
            ? entry.id.$t
            : getURL(entry);

        var exists =
          ALL_ENTRIES.some(
            function (item) {

              var itemID =
                item.id &&
                item.id.$t
                  ? item.id.$t
                  : getURL(item);

              return itemID === id;
            }
          );

        if (!exists) {
          ALL_ENTRIES.push(
            entry
          );
        }
      }
    );
  }

  function buildCategories() {
    CATEGORIES = {};

    ALL_ENTRIES.forEach(
      function (entry) {

        var categories =
          entry.category || [];

        if (
          !categories.length
        ) {
          categories = [
            {
              term: 'Umum'
            }
          ];
        }

        categories.forEach(
          function (category) {

            var name =
              category.term;

            if (
              !CATEGORIES[name]
            ) {
              CATEGORIES[name] = [];
            }

            var exists =
              CATEGORIES[name].some(
                function (item) {

                  return (
                    getURL(item) ===
                    getURL(entry)
                  );
                }
              );

            if (!exists) {
              CATEGORIES[name].push(
                entry
              );
            }
          }
        );
      }
    );

    CATEGORY_NAMES =
      Object.keys(
        CATEGORIES
      );

    CATEGORY_NAMES.sort(
      function (a, b) {

        return a.localeCompare(
          b,
          'id',
          {
            sensitivity: 'base'
          }
        );
      }
    );

    CATEGORY_NAMES.forEach(
      function (category) {

        CATEGORIES[category] =
          sortPosts(
            CATEGORIES[category]
          );
      }
    );
  }

  function renderHeader() {
    return (
      '<div class="toc-header">' +

        '<div class="toc-title">' +

          '<span class="toc-icon">☰</span>' +

          '<span>Daftar Artikel</span>' +

        '</div>' +

        '<div class="toc-total">' +
          ALL_ENTRIES.length +
          ' Artikel' +
        '</div>' +

      '</div>'
    );
  }

  function renderTabs() {
    var html = '';

    html +=
      '<div class="toc-tabs-wrapper">';

    html +=
      '<button class="toc-scroll-btn toc-scroll-left" ' +
      'type="button" ' +
      'aria-label="Geser kiri">‹</button>';

    html +=
      '<ul class="toc-tabs" role="tablist">';

    CATEGORY_NAMES.forEach(
      function (category, index) {

        html +=
          '<li class="toc-tab-item' +
          (
            index === currentCategory
              ? ' active-tab'
              : ''
          ) +
          '">';

        html +=
          '<button ' +
          'type="button" ' +
          'class="toc-tab-button" ' +
          'data-category-index="' +
          index +
          '" ' +
          'role="tab">' +

          escapeHTML(category) +

          '</button>';

        html +=
          '</li>';
      }
    );

    html += '</ul>';

    html +=
      '<button class="toc-scroll-btn toc-scroll-right" ' +
      'type="button" ' +
      'aria-label="Geser kanan">›</button>';

    html += '</div>';

    return html;
  }

  function renderPostContent() {
    var category =
      CATEGORY_NAMES[
        currentCategory
      ];

    var posts =
      CATEGORIES[category] || [];

    var total =
      posts.length;

    var totalPages =
      Math.ceil(
        total /
        CONFIG.postsPerPage
      );

    if (
      currentPage < 1
    ) {
      currentPage = 1;
    }

    if (
      currentPage > totalPages
    ) {
      currentPage =
        totalPages || 1;
    }

    var start =
      (
        currentPage - 1
      ) *
      CONFIG.postsPerPage;

    var end =
      start +
      CONFIG.postsPerPage;

    var visiblePosts =
      posts.slice(
        start,
        end
      );

    var html =
      '<div class="toc-content">';

    html +=
      '<ol class="toc-panel active-panel">';

    visiblePosts.forEach(
      function (entry) {

        var title =
          getTitle(entry);

        var published =
          getDate(entry);

        var url =
          getURL(entry);

        var dateHTML =
          formatDate(
            published
          );

        var thumbnailHTML =
          getThumbnail(
            entry
          );

        var newLabel =
          isNewPost(
            published
          )
            ? ' <em class="toc-new">Baru!</em>'
            : '';

        var summaryHTML = '';

        if (
          CONFIG.showSummaries &&
          entry.summary &&
          entry.summary.$t
        ) {
          summaryHTML =
            '<span class="toc-summary">' +
            escapeHTML(
              truncateText(
                stripHTML(
                  entry.summary.$t
                ),
                CONFIG.numChars
              )
            ) +
            '</span>';
        }

        var target =
          CONFIG.newTabLink
            ? ' target="_blank" rel="noopener noreferrer"'
            : '';

        html +=
          '<li class="toc-item">';

        html +=
          '<a class="toc-link" href="' +
          escapeHTML(url) +
          '"' +
          target +
          '>';

        html +=
          thumbnailHTML;

        html +=
          '<span class="toc-post-content">';

        html +=
          '<span class="toc-post-title">' +
          escapeHTML(title) +
          newLabel +
          '</span>';

        if (dateHTML) {
          html +=
            '<span class="toc-date">' +
            dateHTML +
            '</span>';
        }

        html +=
          summaryHTML;

        html +=
          '</span>';

        html +=
          '</a>';

        html +=
          '</li>';
      }
    );

    html +=
      '</ol>';

    html +=
      renderPagination(
        total,
        totalPages,
        start,
        end
      );

    html +=
      '</div>';

    return html;
  }

  function renderPagination(
    total,
    totalPages,
    start,
    end
  ) {

    if (
      totalPages <= 1
    ) {
      return '';
    }

    var actualEnd =
      Math.min(
        end,
        total
      );

    var html = '';

    html +=
      '<div class="toc-pagination">';

    html +=
      '<div class="toc-page-info">' +

      'Menampilkan ' +
      (start + 1) +
      '–' +
      actualEnd +
      ' dari ' +
      total +
      ' artikel' +

      '</div>';

    html +=
      '<div class="toc-page-buttons">';

    html +=
      '<button type="button" ' +
      'class="toc-page-btn toc-prev"' +
      (
        currentPage === 1
          ? ' disabled'
          : ''
      ) +
      '>‹ Sebelumnya</button>';

    var maxButtons = 7;

    var startPage =
      Math.max(
        1,
        currentPage -
        Math.floor(
          maxButtons / 2
        )
      );

    var endPage =
      Math.min(
        totalPages,
        startPage +
        maxButtons -
        1
      );

    if (
      endPage - startPage <
      maxButtons - 1
    ) {
      startPage =
        Math.max(
          1,
          endPage -
          maxButtons +
          1
        );
    }

    for (
      var page = startPage;
      page <= endPage;
      page++
    ) {

      html +=
        '<button type="button" ' +
        'class="toc-page-number' +
        (
          page === currentPage
            ? ' active-page'
            : ''
        ) +
        '" ' +
        'data-page="' +
        page +
        '">' +
        page +
        '</button>';
    }

    html +=
      '<button type="button" ' +
      'class="toc-page-btn toc-next"' +
      (
        currentPage === totalPages
          ? ' disabled'
          : ''
      ) +
      '>Berikutnya ›</button>';

    html +=
      '</div>';

    html +=
      '</div>';

    return html;
  }

  function updateContent() {
    var content =
      container.querySelector(
        '.toc-content'
      );

    if (!content) {
      return;
    }

    var temporary =
      document.createElement(
        'div'
      );

    temporary.innerHTML =
      renderPostContent();

    var newContent =
      temporary.querySelector(
        '.toc-content'
      );

    if (newContent) {
      content.replaceWith(
        newContent
      );
    }

    initPagination();
  }

  function initCategoryTabs() {
    var buttons =
      container.querySelectorAll(
        '.toc-tab-button'
      );

    buttons.forEach(
      function (button) {

        button.addEventListener(
          'click',
          function () {

            var selectedCategory =
              parseInt(
                this.getAttribute(
                  'data-category-index'
                ),
                10
              );

            if (
              isNaN(
                selectedCategory
              )
            ) {
              return;
            }

            currentCategory =
              selectedCategory;

            currentPage = 1;

            buttons.forEach(
              function (item) {

                item.parentElement
                  .classList
                  .remove(
                    'active-tab'
                  );
              }
            );

            this.parentElement
              .classList
              .add(
                'active-tab'
              );

            updateContent();
          }
        );
      }
    );
  }

  function initPagination() {
    var buttons =
      container.querySelectorAll(
        '.toc-page-number'
      );

    buttons.forEach(
      function (button) {

        button.addEventListener(
          'click',
          function () {

            var page =
              parseInt(
                this.getAttribute(
                  'data-page'
                ),
                10
              );

            if (
              isNaN(page)
            ) {
              return;
            }

            currentPage =
              page;

            updateContent();

            scrollToTOC();
          }
        );
      }
    );

    var prev =
      container.querySelector(
        '.toc-prev'
      );

    var next =
      container.querySelector(
        '.toc-next'
      );

    if (prev) {
      prev.addEventListener(
        'click',
        function () {

          if (
            currentPage > 1
          ) {

            currentPage--;

            updateContent();

            scrollToTOC();
          }
        }
      );
    }

    if (next) {
      next.addEventListener(
        'click',
        function () {

          var category =
            CATEGORY_NAMES[
              currentCategory
            ];

          var total =
            (
              CATEGORIES[
                category
              ] || []
            ).length;

          var totalPages =
            Math.ceil(
              total /
              CONFIG.postsPerPage
            );

          if (
            currentPage <
            totalPages
          ) {

            currentPage++;

            updateContent();

            scrollToTOC();
          }
        }
      );
    }
  }

  function scrollToTOC() {
    var rect =
      container.getBoundingClientRect();

    var scrollTop =
      window.pageYOffset ||
      document.documentElement
        .scrollTop;

    window.scrollTo({
      top:
        scrollTop +
        rect.top -
        20,
      behavior: 'smooth'
    });
  }

  function initTabScroller() {
    var tabs =
      container.querySelector(
        '.toc-tabs'
      );

    var left =
      container.querySelector(
        '.toc-scroll-left'
      );

    var right =
      container.querySelector(
        '.toc-scroll-right'
      );

    if (
      !tabs ||
      !left ||
      !right
    ) {
      return;
    }

    left.addEventListener(
      'click',
      function () {

        tabs.scrollBy({
          left: -220,
          behavior: 'smooth'
        });
      }
    );

    right.addEventListener(
      'click',
      function () {

        tabs.scrollBy({
          left: 220,
          behavior: 'smooth'
        });
      }
    );
  }

  function renderInitial() {
    if (
      !CATEGORY_NAMES.length
    ) {

      showError(
        'Kategori artikel tidak ditemukan.'
      );

      return;
    }

    var html =
      renderHeader();

    html +=
      renderTabs();

    html +=
      renderPostContent();

    container.innerHTML =
      html;

    initCategoryTabs();

    initPagination();

    initTabScroller();
  }

  function showError(message) {
    container.innerHTML =
      '<div class="toc-error">' +

      '<strong>' +
      'Daftar artikel tidak dapat dimuat.' +
      '</strong>' +

      '<span>' +
      escapeHTML(
        message ||
        'Silakan refresh halaman.'
      ) +
      '</span>' +

      '</div>';
  }

  function loadBatch(
    startIndex
  ) {

    return new Promise(
      function (resolve, reject) {

        var callbackName =
          'fairusMajidTOC_' +
          Date.now() +
          '_' +
          startIndex;

        var script =
          document.createElement(
            'script'
          );

        var finished = false;

        var timeout =
          setTimeout(
            function () {

              finish(
                new Error(
                  'Feed timeout'
                )
              );

            },
            15000
          );

        function finish(
          error,
          data
        ) {

          if (finished) {
            return;
          }

          finished = true;

          clearTimeout(
            timeout
          );

          if (
            script.parentNode
          ) {

            script.parentNode
              .removeChild(
                script
              );
          }

          try {

            delete window[
              callbackName
            ];

          } catch (e) {

            window[
              callbackName
            ] = undefined;
          }

          if (error) {
            reject(error);
          } else {
            resolve(data);
          }
        }

        window[
          callbackName
        ] =
          function (data) {

            finish(
              null,
              data
            );
          };

        script.onerror =
          function () {

            finish(
              new Error(
                'Feed error'
              )
            );
          };

        var feedURL =
          CONFIG.blogUrl
            .replace(
              /\/+$/,
              ''
            ) +
          '/feeds/posts/default' +
          '?alt=json-in-script' +
          '&start-index=' +
          startIndex +
          '&max-results=' +
          CONFIG.feedBatchSize +
          '&orderby=published' +
          '&callback=' +
          callbackName;

        script.src =
          feedURL;

        document
          .getElementsByTagName(
            'head'
          )[0]
          .appendChild(
            script
          );
      }
    );
  }

  async function loadAllPosts() {

    if (loading) {
      return;
    }

    loading = true;

    container.innerHTML =
      '<div class="toc-loading">' +
      'Memuat semua artikel...' +
      '<small>Mohon tunggu sebentar.</small>' +
      '</div>';

    try {

      var startIndex = 1;

      var totalResults = null;

      while (true) {

        var data =
          await loadBatch(
            startIndex
          );

        if (
          !data ||
          !data.feed
        ) {
          break;
        }

        var entries =
          data.feed.entry || [];

        if (
          data.feed.openSearch$totalResults &&
          data.feed
            .openSearch$totalResults
            .$t
        ) {

          totalResults =
            parseInt(
              data.feed
                .openSearch$totalResults
                .$t,
              10
            );
        }

        addEntries(
          entries
        );

        if (
          entries.length <
          CONFIG.feedBatchSize
        ) {
          break;
        }

        if (
          totalResults !== null &&
          ALL_ENTRIES.length >=
          totalResults
        ) {
          break;
        }

        startIndex +=
          CONFIG.feedBatchSize;

        if (
          startIndex > 100000
        ) {
          break;
        }
      }

      if (
        !ALL_ENTRIES.length
      ) {

        throw new Error(
          'Tidak ada artikel.'
        );
      }

      buildCategories();

      currentCategory = 0;

      currentPage = 1;

      renderInitial();

    } catch (error) {

      console.error(
        'Tabbed TOC:',
        error
      );

      showError(
        'Feed Blogger gagal dimuat. Silakan refresh halaman.'
      );
    }

    loading = false;
  }

  loadAllPosts();

})();
</script><style>
.tabbed-toc {
  width: 100%;
  margin: 25px 0;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.tabbed-toc .toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.tabbed-toc .toc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.tabbed-toc .toc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #111827;
  color: #fff;
  font-size: 16px;
}

.tabbed-toc .toc-total {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}

.tabbed-toc .toc-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.tabbed-toc .toc-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 10px 45px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.tabbed-toc .toc-tabs::-webkit-scrollbar {
  display: none;
}

.tabbed-toc .toc-tab-item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabbed-toc .toc-tab-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  border-radius: 8px;
  color: #6b7280;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.tabbed-toc .toc-tab-button:hover {
  background: #f3f4f6;
  color: #111827;
}

.tabbed-toc .active-tab .toc-tab-button {
  background: #111827;
  color: #fff;
}

.tabbed-toc .toc-scroll-btn {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: #111827;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tabbed-toc .toc-scroll-left {
  left: 8px;
}

.tabbed-toc .toc-scroll-right {
  right: 8px;
}

.tabbed-toc .toc-content {
  width: 100%;
  box-sizing: border-box;
}

.tabbed-toc .toc-panel {
  display: none;
  margin: 0;
  padding: 8px 20px 18px 50px;
  list-style-position: outside;
}

.tabbed-toc .toc-panel.active-panel {
  display: block;
}

.tabbed-toc .toc-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

.tabbed-toc .toc-item:last-child {
  border-bottom: 0;
}

.tabbed-toc .toc-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 8px;
  color: inherit;
  text-decoration: none;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.tabbed-toc .toc-link:hover {
  background: #f8fafc;
}

.tabbed-toc .toc-post-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.tabbed-toc .toc-post-title {
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.tabbed-toc .toc-link:hover .toc-post-title {
  text-decoration: underline;
}

.tabbed-toc .toc-date {
  margin-top: 5px;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.4;
}

.tabbed-toc .toc-summary {
  margin-top: 6px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

.tabbed-toc .toc-thumbnail {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.tabbed-toc .toc-new {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  white-space: nowrap;
}

.tabbed-toc .toc-loading {
  padding: 35px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.tabbed-toc .toc-loading::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2px solid #d1d5db;
  border-top-color: #111827;
  border-radius: 50%;
  animation: toc-spin 0.8s linear infinite;
}

@keyframes toc-spin {
  to {
    transform: rotate(360deg);
  }
}

.tabbed-toc .toc-error {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.tabbed-toc .toc-error strong {
  color: #dc2626;
}

@media screen and (max-width: 768px) {
  .tabbed-toc {
    margin: 20px 0;
    border-radius: 12px;
  }

  .tabbed-toc .toc-header {
    padding: 15px;
  }

  .tabbed-toc .toc-title {
    font-size: 16px;
  }

  .tabbed-toc .toc-total {
    font-size: 12px;
  }

  .tabbed-toc .toc-tabs {
    padding-left: 42px;
    padding-right: 42px;
  }

  .tabbed-toc .toc-panel {
    padding-left: 38px;
    padding-right: 12px;
  }
}

@media screen and (max-width: 480px) {
  .tabbed-toc {
    border-radius: 10px;
  }

  .tabbed-toc .toc-header {
    padding: 13px;
  }

  .tabbed-toc .toc-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .tabbed-toc .toc-title {
    font-size: 15px;
  }

  .tabbed-toc .toc-total {
    display: none;
  }

  .tabbed-toc .toc-tabs {
    gap: 2px;
    padding: 8px 40px;
  }

  .tabbed-toc .toc-tab-button {
    padding: 8px 11px;
    font-size: 13px;
  }

  .tabbed-toc .toc-panel {
    padding: 5px 8px 12px 30px;
  }

  .tabbed-toc .toc-link {
    padding: 12px 5px;
    gap: 9px;
  }

  .tabbed-toc .toc-post-title {
    font-size: 14px;
    line-height: 1.5;
  }

  .tabbed-toc .toc-date {
    font-size: 11px;
  }

  .tabbed-toc .toc-scroll-btn {
    width: 28px;
    height: 28px;
    font-size: 19px;
  }
}

.tabbed-toc .toc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 10px 20px 20px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.tabbed-toc .toc-page-info {
  color: #6b7280;
  font-size: 13px;
  white-space: nowrap;
}

.tabbed-toc .toc-page-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.tabbed-toc .toc-page-btn,
.tabbed-toc .toc-page-number {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  color: #374151;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

.tabbed-toc .toc-page-btn:hover:not(:disabled),
.tabbed-toc .toc-page-number:hover {
  background: #f3f4f6;
}

.tabbed-toc .toc-page-number.active-page {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.tabbed-toc .toc-page-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.tabbed-toc .toc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100px;
}

.tabbed-toc .toc-loading small {
  color: #9ca3af;
  font-size: 12px;
}

@media screen and (max-width: 600px) {
  .tabbed-toc .toc-pagination {
    flex-direction: column;
    align-items: stretch;
    margin: 10px 12px 15px;
  }

  .tabbed-toc .toc-page-info {
    text-align: center;
  }

  .tabbed-toc .toc-page-buttons {
    justify-content: center;
  }

  .tabbed-toc .toc-page-btn,
  .tabbed-toc .toc-page-number {
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    font-size: 12px;
  }
}
</style>

Catatan: kode di dalam kotak di atas sengaja ditampilkan sebagai teks agar tidak langsung dieksekusi oleh halaman artikel. Gunakan tombol Copy Script, kemudian tempelkan hasilnya ke halaman Sitemap Blogger dalam mode HTML.

3. Atur Jumlah Artikel Per Halaman

Kalau kamu merasa 50 artikel terlalu banyak, kamu bisa mengubah nilai berikut:

postsPerPage: 50

Contohnya:

25 = 25 artikel setiap halaman.
50 = 50 artikel setiap halaman.
100 = 100 artikel setiap halaman.

Untuk blog dengan jumlah artikel yang cukup banyak, saya lebih menyarankan 50 artikel per halaman agar halaman tetap nyaman digunakan.

4. Mengaktifkan Thumbnail

Secara default thumbnail dibuat tidak aktif agar sitemap lebih ringan. Kalau ingin menampilkan gambar artikel, ubah:

showThumbnails: false

menjadi:

showThumbnails: true

Ukuran thumbnail juga bisa disesuaikan melalui:

thumbSize: 60

5. Mengaktifkan Ringkasan Artikel

Kalau ingin sitemap menampilkan sedikit deskripsi dari setiap artikel, ubah:

showSummaries: false

menjadi:

showSummaries: true

Panjang ringkasannya bisa diatur melalui:

numChars: 160

6. Menampilkan Label "Baru!"

Fitur ini juga tersedia jika kamu ingin memberikan penanda pada artikel yang masih tergolong baru.

Aktifkan dengan mengubah:

showNew: false

menjadi:

showNew: true

Jumlah hari artikel dianggap baru dapat diatur melalui:

newDays: 7

Bagaimana Script Ini Bekerja?

Secara sederhana, script akan mengakses Blogger Feed menggunakan format JSONP. Data artikel kemudian dikumpulkan dan diproses menggunakan JavaScript.

Setelah semua artikel berhasil diambil, script akan:

Mengambil judul artikel.
Mengambil URL artikel.
Mengambil tanggal publikasi.
Mengambil label/kategori.
Mengelompokkan artikel berdasarkan label.
Mengurutkan artikel berdasarkan tanggal terbaru.
Membuat tab kategori.
Membuat pagination.
Menampilkan daftar artikel secara responsif.

Menariknya, saat berpindah halaman pagination, kategori yang sedang dipilih tetap dipertahankan. Jadi kamu tidak akan tiba-tiba kembali ke kategori pertama.

Kenapa Saya Menyarankan Sitemap Seperti Ini?

Untuk blog yang sudah memiliki banyak konten, sitemap bukan hanya soal SEO. Sitemap juga bisa menjadi halaman navigasi konten yang membantu pembaca menemukan artikel-artikel lama.

Daripada membuat daftar ratusan artikel yang panjang ke bawah, sistem tab dan pagination membuat semuanya terasa lebih terorganisir.

Desainnya juga dibuat sederhana dengan warna netral sehingga relatif mudah disesuaikan dengan tampilan template Blogger apa pun.

Kesimpulan

Membuat sitemap Blogger sebenarnya tidak harus menggunakan plugin atau layanan pihak ketiga. Dengan memanfaatkan Blogger Feed + JavaScript + CSS, kita bisa membuat halaman sitemap yang jauh lebih modern dan nyaman digunakan.

Script di atas sudah dilengkapi dengan kategori otomatis, pagination, responsive layout, loading indicator, tanggal artikel, opsi thumbnail, opsi ringkasan, label artikel baru, serta navigasi kategori yang bisa digeser di smartphone.

Kalau blog kamu sudah memiliki puluhan sampai ratusan artikel, sitemap model seperti ini menurut saya jauh lebih enak digunakan dibanding sitemap sederhana yang hanya menampilkan daftar judul panjang tanpa navigasi.

Tips terakhir: setelah memasang sitemap, buka halaman tersebut menggunakan smartphone dan desktop untuk memastikan tampilan sesuai dengan template Blogger yang kamu gunakan. Jika ada konflik CSS dari template, biasanya solusinya cukup menyesuaikan beberapa selector CSS.

Majid Abana Segaf Penebar Cinta Dari Negeri Fana

Fairus Majid

Membuat Sitemap Blogger Responsif dengan Tab Kategori, Pagination & Tombol Copy

Kenapa Menggunakan Sitemap Blogger Ini?

Tampilan Sitemap yang Lebih Rapi

Fitur Pagination

Cara Memasang Sitemap di Blogger

1. Buat Halaman Sitemap

2. Masukkan Script Sitemap

Full Script Sitemap Blogger

3. Atur Jumlah Artikel Per Halaman

4. Mengaktifkan Thumbnail

5. Mengaktifkan Ringkasan Artikel

6. Menampilkan Label "Baru!"

Bagaimana Script Ini Bekerja?

Kenapa Saya Menyarankan Sitemap Seperti Ini?

Kesimpulan

Posting Komentar untuk "Membuat Sitemap Blogger Responsif dengan Tab Kategori, Pagination & Tombol Copy"

Get new posts by email: