Cara Membuat Sitemap Blog 3D Terbaru

Sitemap adalah halaman yang berisi daftar isi seluruh postingan yang telah kita post. Menghadirkan sitemap pada blog punya kelebihan tersendiri, karena dapat mempermudah pengunjung untuk menelusuri semua postingan yang ada di blog.

Selain mempermudah pengunjung dalam mencari postingan, sitemap juga merupakan salah satu faktor pendorong agar mesin pencarian mudah untuk merayapi, mendeteksi, dan mengindeks halaman blog kita.

Dengan kata lain, sitemap memungkinkan blog untuk berada pada urutan teratas di mesin pencarian.

Tapi sayangnya blogspot sendiri tidak menyediakan layanan ini secara khusus, namun kita bisa membuat sitemape ini sendiri dengan menggunakan kode CSS + HTML + Javascript.

Sebetulnya banyak sekali website yang membahas tentang cara membuat sitemap blog ini, namun script yang mereka berikan sering kali mengalami error. Sehingga saat kita menggunakan script tersebut, sitemap tidak akan muncul.

Hal ini bisa kita perbaiki dengan mengotak-atik script atau untuk lebih mudahnya mengganti script tersebut yang script yang terbaru yang benar-benar masih berfungsi.

Nah, berdasarkan penjelasan dan masalah di atas. Kali ini saya akan membagikan script terbaru untuk membuat sitemap. Pastinya script ini masih work dan saya sendiri masih menggunakan script ini sampai sekarang.

Ada 2 jenis Sitemap yang akan saya bagikan, mengingat template yang dipakai Blogger juga banyak jenisnya. Sehingga jika salah satu Sitemap berikut ada yang tidak cocok, bisa pakai sitemap satunya.

1. SITEMAP VERSI 3D

1. Buka Blogger > Halaman > + Halaman Baru

2. Tulis Sitemap atau Daftar Isi pada kotak judul

3. Ubah ke Tampilan HTML dulu

4. Lalu masukkan Script ini

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0,0.2)}.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:#3498DB;border:1px solid #2D96DF;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block}.labl a{color:#fff}.labl:first-letter{text-transform:uppercase}.new{color:#FF5F00;font-weight:bold;font-style:italic;display:inline}.postname{font-weight:normal;background:#fff;margin-left:1px}.postname li{border-bottom:#ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.saifullah.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

5. Ganti yang warna kuning dengan alamat URL Blog kalian

6. Klik Publikasikan

7. Klik View untuk melihat apakah berhasil atau tidak

8. Tunggu beberapa saat karena script akan mengumpulkan data untuk dimasukkan kedalam sitemap

9. Berhasil

Live Demo

2. Sitemap Versi Simpel

Jika script sitemap di atas tidak berfungsi, silakan ganti dengan script ini.

<div class='postSection sitemaps' id='sitemaps'>

  <div class='loading'>Loading....</div>

</div>

<script>/*<![CDATA[*/

/* Blogger Sitemap Dropdown: change i.src="..." with your url */

var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};

window.onload = function(){

!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemapBox\"><h4 class=\"sitemapTitle\">'+n[g]+'</h4>',l+='<div class=\"sitemapContent\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="https://www.saifullah.id/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);

}

/*]]>*/</script>

<style>

.sitemaps{font-size:14px}

.sitemapBox{padding:15px;border:1px solid var(--content-border);border-radius:5px}

.sitemapBox:not(:last-child){margin-bottom:20px}

.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}

.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}

.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}

.sitemaps li{display:flex;align-items:baseline}

.sitemaps li:not(:last-child){margin-bottom:0}

.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7}

.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}

</style>

Pesan Jasa Pasang Script

Jika kedua script di atas tidak bisa digunakan juga, silakan gunakan jasa kami untuk membantu proses pemasangan: Klik di sini

Demikian yang dapat saya sampaikan, semoga berhasil dan jangan lupa dibagikan ke sosial media kalian melalui tombol share di bawah ini, agar mereka bisa memaksimalkan blog yang mereka miliki dan mudah-mudahan ulasan ini bisa membantu blogger yang lain untuk mengganti script yang error dengan script terbaru. Semoga bermanfaat :)