Cara Membuat Sitemap Seperti Median UI Support Dark Mode

Median UI Sitemap

Sitemap merupakan komponen penting dalam sebuah situs web karena dapat mempermudah pengunjung web untuk mengetahui apa aja sih isi dari blog tersebut, tanpa harus membuka semua postingan yang terdapat didalam blog tersebut.

Apa Itu Sitemap ?

Jika pada sebuah buku sitemap ini bisa diibaratkan dengan daftar isi. Fungsi dari sitemap (peta situs) pada sebuah web yaitu untuk mempermudah pengunjung sebagai navigasi halaman yang dapat menampilkan semua daftar artikel sama halnya dengan daftar isi di buku.

Sitemap_esthonoles

Kenapa Harus Menggunakan Sitemap ?

Memasang Sitemap pada sebuah blog menurut saya itu sangat penting, google juga menganjurkan untuk memasang sitemap di dalam situs kalian. selain mempermudah pengunjung dalam bernavigasi di dalam web, sitemap juga bisa sangat berefek kepada SEO blog kita.

Cara Pasang Sitemap Median UI

Untuk memasang Sitemap di template median ui sangat mudah sekali, tapi perlu kalian ingat source code yang saya bagikan ini mungkin hanya akan berjalan maksimal di Template Median UI.

# Langkah Pertama buka blogger dan klik tab halaman

# Selanjutnya Buat Halaman Baru

# Ubah Tampilan penulisan Ke HTML

# Copy paste Code berikut kedalaman Halaman yang baru kita buat

<!--Median Ui v1.5 Sitemap Page Codes by ASThemesWorld-->
<div class='postBody' id='postBody'><div class='postSection sitemaps' id='sitemaps'>
  <div class='loading'>Loading....</div>
</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://esthonoles.blogspot.com/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>

Download Source Code

Note : https://esthonoles.blogspot.com ganti dengan Url blog kalian

# Kemudian Publikasikan Halaman

Kesimpulan

Tutorial cara pasang sitemap di template Median UI ini cukup mudah tinggal buat halaman baru, masuk mode compose html kemudian paste codenya dan ubah URL nya menjadi blog kalian step terahir tinggal di publish.

Referensi:
www.asthemesworld.xyz

Esthonoles

Hi, Myself Aqiel, the founder of this blog. Blogging provides me with a better space to put all my knowledge and experiences so that my visitors can get the benefit of it.

Share this post