Cara Membuat Sitemap di Blogger

Muhamad Nur
Muhamad Nur
September 08, 2020
Cara Membuat Sitemap di Blogger
Cara Membuat Sitemap di Blogger

Pada Artikel kali ini tentang, Cara Membuat Sitemap di Halaman Statis Blogger yang tentu selain tampilannya baru juga kelebihannya yaitu responsive.

Sitemap kali ini memiliki tampilan yang cenderung unik minimalis dengan penyortiran artikel berdasarkan label yang ada di blog kalian. Untuk lebih jelasnya, kalian bisa lihat halaman sitemap yang ada pada blog admin.

Tahukah kalian seberapa pentingnya sitemap pada sebuah situs web? Jika diibaratkan perjalanan sitemap inilah yang berfungsi sebagai penunjuk jalan agar kalain agar tidak tersesat saat mengunjungi suatu tempat. Fungsi itulah yang membuat sitemap harus ada pada sebuah situs web.

Daftar isi
  1. Pengertian
  2. Fungsi / Kegunaan
  3. Tutorial Pemasangan
  4. Penutup
Untuk membuat sebuah sitemap pun banyak berbagai macam cara yang bisa kalian gunakan, seperti menggunakan CSS, atau pure hanya menggnakan HTML, dan bahkan ada yang memakai JavaScript untuk menjalankan efek seperti accordian dan banyak lagi.

Pada artikel kali ini, kalian hanya perlu menambahkan CSS dan HTML ke dalam template dan juga halaman statis blogger, contoh hasil jadinya seperti berikut ini.


Sitemap / Daftar Isi

Pengertian Sitemap

Sitemap / Daftar Isi ini merupakan sebuah halaman yang berfungsi sebagai alat bantu para webmaster terutama para blogger seperti kalian, untuk mempermudah dalam pengenalan peta situs di dalam sebuah website yang kalian buat. Dengan adanya sitemap, maka situs atau website kalian dapat mudah diraih oleh mesin perayap dan tentunya juga untuk pengunjung.

Menurut para webmaster, sitemap juga bisa mempengaruhi nilai SEO website yang kalian kelola. Mengapa demikian? karena dengan adanya halaman sitemap, kalian selaku owner web akan terbantu dengan tidak harus submit URL artikel secara manual ke google search console ( tapi ya saya sih tetep submit ke GSC secara manual biar lebih pasti heheh ).

Fungsi Sitemap

Berikut ini adalah fungsi dari sitemap / daftar isi yang saya ketahui diantaranya adalah,
  • Mempermudah pengunjung untuk menjelajahi isi dari website yang kita kelola.
  • Visibilitas website
  • Berinteraksi lebih baik dengan mesin pencari.
  • Meningkatkan pengunjng.
  • Merapihkan Authority

Cara Membuat Sitemap di Blogger

Untuk membuat suatu sitemap pada halaman statis blogger, kalian hanya perlu menambahkan kode CSS ke dalam template dan kode HTML ke dalam halaman baru. 

Perlu diketahui bahwa tutorial ini hanya menggunakan CSS dan HTML, tanpa adanya tambahan dari JavaScript.
Perhatian!
Sebelum melanjutkan ke tutorial, ada baiknya kalian backup terlebih dahulu sitemap kalian yang telah kalian pakai.

A. Menambahkan Kode CSS Sitemap

  1. Silahkan login terlebih dahulu ke Blogger.com
  2. Pada menu dashboard, pilih Template > Edit HTML
  3. Lalu cari kode ]]></b:skin>
    4. Gunakan tombol CTRL + F di keyboard untuk memudahkan pencarian.
  4. Salin kode CSS dibawah ini, dan letakkan sebelum kode pada (langkah no.3). 
    5. 
*/ Sitemap by RuangCoder.com */
.Blog .sitemaps .sitemap-box{font-size:14px;line-height:1.5em;padding:15px 18px;border-radius:8px;background-color:rgba(255,255,255,.7);box-shadow:0 4px 12px 0 rgba(9,32,76,.035)}
.Blog .sitemaps .sitemap-box:not(:last-child){margin-bottom:15px}
.Blog .sitemaps .judul{margin-top:0;font-size:1.1rem}
.Blog .sitemaps ol{list-style:none;margin:20px 0 0;padding:0;counter-reset:panduan-count;font-size:14px;}
.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;color:#767676;text-align:center;padding-right:12px}
.Blog .sitemaps li a{display:inline-block;color:#161617}
.Blog .sitemaps li a:after{content:'Selengkapnya';display:block;color:#767676;font-size:11px;line-height:1.3em}
.Blog .sitemaps li a:hover:after{text-decoration:underline}
  5. Save Template

B. Menambahkan Kode HTML di Halaman

  1. Pastikan tetap berada di dashbord blogger.
  2. Lalu pilih Halaman > dan buat Halaman Baru
  3. Ubah mode penulisan ke HTML bukan Compose
  4. Kemudian salin kode berikut ini dan letakkan ke dalam teks area halaman.
    5. 
<div id='post-body'><div id='sitemaps' class='sitemaps'>
<div class='loading'>Loading....</div>
</div>
<script>/*<![CDATA]*/
/* Blogger Sitemap RuangCoder.com */
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="URL-BLOG/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>
</div>
    Keterangan:
    Ubah yang sudah di marking dengan URL Blog kalian.
  5. Publikasikan

Penutup

Nah, disini kalian sudah berhasil membuat sitemap di halaman statis blogger kalian. Jika ada bug atau kalian belum paham jangan ragu - ragu untuk bertanya melalui kolom komentar yang tersedia dibawah artikel ini.

Mungkin sekian dahulu postingan dari Cara Membuat Sitemap di Blogger, semoga bermanfaat.
Terimakasih