Cara Membuat Halaman Sitemap Otomatis Pada BLOGGER

https://blog.ongky.eu.org

Jika kamu mengunjungi sebuah website atau blog sering kita menemukan menu navigasi yang mengarah pada halaman sitemap atau daftar isi, daftar konten. Yang sesuai namanya dalam label blog, halaman ini berisi daftar isi seluruh postingan dalam website atau blog tersebut.

Jika kamu mempunyai blog, Kamu harus melengkapi dari beberapa fitur ketersediaan blog kamu contohnya seperti membuat halaman kontak, About, Disclaimer. Kamu juga perlu melengkapi blog kamu dengan sebuah halaman sitemap.

Karena Sitemap menampilkan daftar isi seluruh postingan blog, maka sebuah blog sangat perlu dilengkapi dengan sebuah adanya halaman sitemap agar memudahkan pengunjung memilih informasi apa yang ingin mereka ketahui.

Maka dari itu, pada tulisan ini saya akan mencoba membagikan sebuah informasi tentang cara membuat halaman sitemap pada blog dengan platform blogger tepatnya bagi para pengguna template iMagz.

Kegunaan Halaman Sitemap:

Untuk hal ini sudah saya sebutkan di atas, bahwa halaman sitemap berfungsi untuk menampilkan daftar isi seluruh postingan blog. Dengan daftar isi tersebut, maka pengunjung dapat dengan mudah melihat informasi yang ingin mereka ketahui.

Apalagi jika blog kamu sudah memiliki ratusan atau ribuan postingan, maka sitemap akan sangat memudahkan pengunjung saat mengunjungi blog kamu.

Karena biasanya, halaman sitemap pada blog dibuat secara sistematis untuk menampilkan postingan berdasarkan label atau kategori yang sesuai urutan abjad dan waktu pembuatan postingan.

Jenis Halaman Sitemap:

Halaman sitemap yang saya maksud dalam tulisan ini adalah halaman sitemap.html dan bukan sitemap.xml. Karena sitemap yang berbeda jenisnya, berbeda pula fungsi dan cara membuatnya.

Sebaliknya, sitemap yang dibuat otomatis akan sangat dalam membuatnya, karena hanya dengan memasukan beberapa kode, maka sitemap sudah terbuat dengan sendirinya.

Blog ini juga menggunakan sitemap otomatis, jadi saya juga menyarankan kamu untuk membuat sitemap blog kamu dengan secara otomatis.

Apabila kamu ingin membuat halaman sitemap otomatis untuk blog kamu, maka silahkan ikuti cara berikut dibawah ini.

Membuat Halaman Sitemap Otomatis pada Blogger

Setelah mengetahui manfaat dan jenis halaman blog, maka sekarang saatnya membuat halaman sitemap otomatis pada blogger. Silahkan kamu buat halaman baru terlebih dahulu yang caranya seperti dibawah.

1. Pada dashboard blogger pilih menu Page/Halaman - pilih new page/halaman baru - ketik judul halaman misalnya sitemap, daftar isi, daftar konten, dan sejenisnya.


2. Pada bagian konten, silahkan beralih pada tampilan html dan isikan kode skrip yang ada dibawah.


3. Apabila sudah selesai semua silahkan kamu pilih publikasikan.

<div class='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://blog.ongky.eu.org/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(--contentBo);border-radius:5px}
.sitemapBox:not(:last-child){margin-bottom:20px}
.pBd .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--fontB)}
.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(--fontB);line-height:normal; opacity:.7}

.drkM .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>

Untuk yang ditandai https://blog.ongky.eu.org silahkan kamu ganti dengan url alamat blog kamu. Untuk contoh sitemap pada blog ini kamu bisa melihatnya melalui klik tombol demo yang dibawah.

Results

Itulah Cara Membuat Halaman Sitemap Otomatis Pada BLOGGER dengan mudah dan semoga artikel ini dapat membantu.