Membuat Halaman Sitemap Blogger SEO Responsif

Halaman sitemap median ui

Sitemap adalah element penting pada blog yang dimana artikel dalam postingan yang dapat tersimpan pada halaman sitemap dan dapat memudahkan para pembaca blog dalam mencari artikel pada blog.

Jika blog teman-teman belum terdapat halaman sitemap dan mencari artikel tentang membuat sitemap pada blogger maka kalian dapat membuat halaman sitemap dengan mudah dengan mengikuti cara yang di ulas pada blog ini dan kalian dapat mebuat halaman sitemap dengan cara yang mudah SEO dan responsif yang mudah dirayapi oleh mensin pencarian google.

Untuk melihat tampilan lengkapnya kalian bisa melihat demo nya pada tombol button yang ada dibawah.

Halaman Sitemap

Kode script didalamnya adalah menggunakan script milik template Median UI.

Halaman Sitemap Blogger

Berikut dibawah adalah cara membuat halaman sitemap pada blogger.

1. Silahkan login ke blogger lalu pilih 'Halaman'

2. Dimenu halaman ini silahkan pilih buat halaman baru

3. Silahkan ganti mode compose menjadi mode html, lalu copy paste code script yang ada dibawah, dan tempel pada kotak posting satu persatu.

<div id='post-body'><div id='sitemaps' class='sitemaps'>
<div class='loading'>Loading....</div>
</div>
  
<h3>What is a Sitemap?</h3>
<p>A sitemap is a page or page that contains all the link information on a website. Information in the form of categories, posts, pages, images to tags, all listed on the sitemap page.</p>

<style>/*<![CDATA[*/
/* Sitemap Page */
.Blog .sitemaps .sitemap-box{font-size:14px;line-height:1.5em;padding:15px 18px;background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:10px}
.Blog .sitemaps .sitemap-box:not(:last-child){margin-bottom:15px}
.Blog .sitemaps .judul{margin-top:0;font-size:1.1rem}
.Blog .sitemaps ol{color:inherit;list-style:none;margin:20px 0 0;padding:0;counter-reset:panduan-count;font-size:14px;} .Blog .sitemaps ol:after{color:#fff}
.Blog .sitemaps li:not(:last-child){margin-bottom:10px}
.Blog .sitemaps li{display:flex;align-items:flex-start;}
.Blog .sitemaps li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:45px;font-size:26px;line-height:1em;text-align:center;padding-right:12px}
.Blog .sitemaps li a{display:inline-block;color:inherit}
.Blog .sitemaps li a:before{color:#fff}
.Blog .sitemaps li a:hover{color:var(--linkC)}  
.Blog .sitemaps li a:after{color:var(--linkC);content:'Selengkapnya';display:block;font-size:11px;line-height:1.3em}
.Blog .sitemaps li a:hover:after{color:inherit;text-decoration:underline}
/* Dark Mode */
.drK .Blog .sitemaps .sitemap-box{background:var(--darkBa)}
.drK .Blog .sitemaps li a{color:#fff} .drK .Blog .sitemaps li a:hover{color:var(--linkC)}
/*]]>*/</style>

<script>/*<![CDATA]*/
/* JS Sitemap */
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=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><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,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.wak.my.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></div>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

4. Jika sudah semuanya sudah selesai silahkan klik Publikasikan posting halaman.

5. Lihat pratinjau untuk melihat hasilnya.

Perlu di ingat code tersebut harus disimpan dengan srcara berurutan agar tidak terdapat kesalahan struktuk code pada postingan dan sehingga menyebabkan sitemap ini sulit dirayapi oleh mesin pencarian google.

Penutup :

Jika ada yang kesulitan dalam artikel ini silahkan tanyakan pada komentar yang ada dibawah.