Cara Membuat Halaman Sitemap SEO di Blogger

Cara Membuat Sitemap di Blog - Halaman Sitemap merupakan elemen penting dalam blog untuk meningkatkan index artikel yang ada pada blog agar cepat muncul dipencarian google, dan fungsi lain pada halaman sitemap membuat para pembaca dapat mencari artikel blog kita dengan mudah.

Untuk tampilan sitemap yang saya bagikan merupakan tampilan terbaru, responsive dan tentunya SEO Friendly bagi pegunjung dimana setiap artikel dibagi menjadi beberapa label yang ada jadi sangat memudahkan dalam mencari artikel sesuai kategori.

Sumber kode tampilan halaman sitemap ini merupakan hasil redesign saya sendiri semoga banyak yang menyukainya, lalu bagaimana cara memasang sitemap blog ini? Simak tutorialnya berikut ini.

Cara Membuat Halaman Sitemap Blogger Keren

Berikut adalah langkah-langkah membuat halaman sitemap di blogspot:

1. Buka dashboard blog kamu di blogger.com
2. Masuk ke menu Halaman lalu Buat Halaman Baru.
3. Buat judul/nama halaman Sitemap.
4. Lalu pilih mode HTML dan salin kode dibawah ini berupa CSS, HTML dan JavaScript.
<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'/>

5. Jika sudah menyalin tempelkan kode yang disalin secara berurutan dari html, css dan javascript sesuai urutan dihalaman sitemap blog kamu.
6. Terakhir klik posting dan cek hasilnya selesai!

Catatan
Ubah css pada bagian tags class " var(--linkC) " dengan kode hex color untuk mengubah warna sesuai selera kalian dan untuk tags class mode malam jika kalian menggunakan template Median UI v1.6 tidak perlu mengubahnya. kecuali yang menggunakan template lain sebaiknya sesuaikan dengan tags class darkmode template kalian agar mode malam berfungsi sepenuhnya.

Ingat tempelkan kode diatas sesuai urutan seperti yang sudah dijelaskan, fungsinya agar tidak terjadi kesalahan struktur pada artikel yang dapat menyebabkan masalah index perayapan google.

Penutup

Bagaimana menarik bukan tampilan sitemapnya? hehe semoga suka, demikianlah untuk artikel Cara Membuat Sitemap di Halaman Statis Blogger jika penjelasannya sukar dimengerti berikan komentar kamu agar saya dapat merevisinya wassalam.