Cara Menambahkan Sitemap HTML yang Ramah Terhadap Dark Mode

Daftar Isi

Cara Menambahkan Sitemap HTML ke Blog - Sitemap HTML atau bisa juga disebut sebagai Daftar Isi adalah sebuah halaman yang berisi daftar artikel apa saja yang ada di blog kita dan halaman ini adalah salah satu page atau halaman yang wajib ada jika membuat sebuah blog karena menjadi salah satu syarat jika blog anda ingin diterima sebagai publisher dari Google Adsense.

Beberapa hari yang lalu saya sempat mengalami kendala saat melihat beberapa artikel yang ada di halaman ini tidak semua bisa terbaca, padahal artikel atau entri yang ada di blog ini sudah cukup banyak. 

Saya cukup bingung saat itu, pada akhirnya saya menemukan jawabannya pada salah satu blog, saya lupa dari blog siapa mohon maaf hehehe disitu beliau menuliskan jika kesalahan ini bisa terjadi dikarenakan kode script yang ditambahkan untuk memanggil sudah tidak berfungsi dengan baik. 

Jika pun  kode script masih berfungsi, bisa jadi dikarenakan kode pemanggil tersebut memiliki kuota dalam artian sudah maksimal dalam prosesnya. Hal ini berati blog anda sudah cukup banyak memiliki artikel atau entri, sehingga script yang digunakan tidak bisa menampung lagi.

Memang beberapa script dilengkapi dengan kode bisa memanggil hingga 1000 artikel tapi tetap saja tidak bisa memanggil semuanya. 

Saya sempat bertanya, dan jawaban yang saya dapatkan adalah bisa menggunakan kode pemanggil yang di dobel. Saya kurang tahu pasti karena saya tidak terlalu paham. Namun saya mendapatkan kode script Sitemap HTML yang ramah terhadap Dark Mode sehingga sangat cocok untuk template LinkMagz ataupun blog yang memiliki Dark Mode.

Selain itu kode HTML ini juga bisa memanggil seluruh artikel sehingga akan memudahkan pengunjung blog jika mengaksesnya.

Cara Memasang Sitemap HTML di Blog

1. Pertama Bukalah halaman Blogger.com
2. Login dengan email yang sudah didaftarkan
3. Pilih lah “Halaman”
4. Pilih Tambahkan Halaman Baru
5. Ubah mode penulisannya dari Tampilkan Menulis menjadi  Tampilkan HTML
6. Masukan kode dibawah ini

<div class="tabbed-toc" id="tabbed-toc"><span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
  blogUrl: "https://www.bagikansaja.com/",  // Ganti sesuai blog Anda
  containerId: "tabbed-toc",
  activeTab: 1,
  showDates: true,
  showSummaries: false,
  numChars: 200,
  showThumbnails: true,
  thumbSize: 60,
  noThumb: "https://via.placeholder.com/60",
  monthNames: [
    "Januari","Februari","Maret","April","Mei","Juni",
    "Juli","Agustus","September","Oktober","November","Desember"
  ],
  newTabLink: true,
  maxResults: 1000,
  preload: 0,
  sortAlphabetically: false,  // Kategori sesuai urutan kemunculan
  showNew: 7,
  newText: ' &ndash; <em style="color:red;">New!</em>'
};
(function(w,d){
  var c=(new Date).getTime(), allEntries=[], startIndex=1, maxPerCall=150;
  function fetchFeed(start) {
    var script = d.createElement("script");
    script.src = tabbedTOC.blogUrl.replace(/\/+$/g, "") +
      "/feeds/posts/summary?alt=json-in-script&start-index=" + start +
      "&max-results=" + maxPerCall + "&orderby=published&callback=handleFeed_" + c;
    d.head.appendChild(script);
  }
  w["handleFeed_" + c] = function(data){
    var entries = data.feed.entry || [];
    allEntries = allEntries.concat(entries);
    var total = parseInt(data.feed.openSearch$totalResults.$t, 10);
    if (allEntries.length < Math.min(total, tabbedTOC.maxResults)) {
      fetchFeed(allEntries.length + 1);
    } else {
      tabbedTOC.fullEntries = allEntries;
      showTabsCustom(tabbedTOC, c);
    }
  };
  function showTabsCustom(g, c) {
    var b = document.getElementById(g.containerId);
    var h = g.fullEntries;
    var cats = [];
    // Kumpulkan kategori berdasarkan urutan kemunculan pertama https://www.bagikansaja.com
    h.forEach(function(post) {
      (post.category || []).forEach(function(cat) {
        if (!cats.includes(cat.term)) cats.push(cat.term);
      });
    });
    var html = '<span class="toc-line"></span><ul class="toc-tabs">';
    cats.forEach(function(cat, idx) {
      html += '<li class="toc-tab-item-'+idx+'"><a onclick="clickTabs_'+c+'('+idx+');return false;" onmousedown="return false;" href="javascript:;">'+cat+'</a></li>';
    });
    html += "</ul><div class='toc-content'>";
    cats.forEach(function(cat, idx) {
      html += '<ol class="panel" data-category="'+cat+'"'+(idx!==g.activeTab-1?' style="display:none;"':'')+'>';
      h.forEach(function(entry) {
        var hasCat = (entry.category || []).some(function(c2){ return c2.term === cat; });
        if (!hasCat) return;
        var title = entry.title.$t;
        var link = entry.link.find(function(l){ return l.rel === 'alternate'; }).href;
        var dateHTML = g.showDates
          ? '<time datetime="'+entry.published.$t+'">'+entry.published.$t.substring(8,10)+' '+g.monthNames[parseInt(entry.published.$t.substring(5,7))-1]+' '+entry.published.$t.substring(0,4)+'</time>'
          : '';
        html += '<li><a href="'+link+'"'+(g.newTabLink?' target="_blank"':'')+'>'+title+'</a>'+dateHTML+'</li>';
      });
      html += '</ol>';
    });
    html += '<div style="clear:both;"></div>';
    b.innerHTML = html;
    // Bind clickTabs
    window['clickTabs_'+c] = function(i) {
      var container = document.getElementById(g.containerId);
      var panels = container.querySelectorAll('ol.panel');
      var tabs = container.querySelectorAll('ul.toc-tabs a');
      panels.forEach(function(p, idx){ p.style.display = idx===i?'block':'none'; });
      tabs.forEach(function(t, idx){ t.classList.toggle('active-tab', idx===i); });
    };
    window['clickTabs_'+c](g.activeTab-1);
  }
  fetchFeed(startIndex);
})(window, document);
</script>
<style>
#tabbed-toc .toc-tabs { list-style:none; padding:0; margin:0 0 10px; display:flex; flex-wrap:wrap; }
#tabbed-toc .toc-tabs li { margin-right:5px; }
#tabbed-toc .toc-tabs a { padding:5px 10px; background:#f2f2f2; border-radius:3px; text-decoration:none; color:#333; }
#tabbed-toc .toc-tabs a.active-tab { background:#333; color:#fff; }
#tabbed-toc ol.panel { list-style:none; padding-left:0; margin-bottom:20px; }
#tabbed-toc li { margin-bottom:10px; }
#tabbed-toc time { color:#888; font-size:0.85em; margin-left:5px; }
</style>

Langkah terakhir klik Publikasikan

Note: jangan lupa mengganti alamat blog yang sudah saya BOLD diatas dengan alamat/URL blog anda ya

Keuntungan Menggunakan Kode Script HTML

Beberapa keuntungan yang bisa didapatkan jika menggunakan kode HTML untuk Sitemap diatas bisa saya rangkum menjadi beberapa point, diantaranya

Ramah Dengan Dark Mode Blog

Untuk Blog yang dilengkapi dengan fitur Dark Mode akan sangat terbantu jika menggunakan script ini karena bisa menyesuaikan warna dengan fitur tersebut. Karena jika script lain akan susah menyesuaikan dengan blog yang memiliki Mode Gelap

Bisa Menampilkan Semua Entri

Beberapa Script Sitemap ada yang tidak bisa menampilkan semua entri dikarenakan kapasitasnya. Jika menggunakan Script diatas, Insya Alloh semua entri bisa ditampilkan. Hal ini dibuktikan dengan Sitemap HTML yang ada di blog ini.

Responsive Serta Meningkatkan Pengalaman Pengguna

Responsive adalah bisa mengikuti atau menyesuaikan tampilan jika dibuka menggunakan desktop, Tablet, atau smartphone. Tentu hal ini akan meningkatkan pengalaman pengguna bukan?

Oke deh segitu saja. 

Kesimpulan

Jika mengunakan kode diatas, Insya Alloh masalah artikel yang tidak bisa muncul semua pada Sitemap bisa teratasi, serta kode Sitemap HTML diatas juga sudah support untuk Mode Gelap atau Dark Mode. Jadi blog yang memiliki fitur ini bisa menggunakannya karena script ini bisa menyesuaikan dengan Dark Mode pada blog anda. Selamat mencoba

Sabda Hello! Saya hanya seekor anak itik yang kadang suka nulis di Blog ini.

Berbagi :