Cara Buat Sitemap di Blogger

Pada artikel kali ini kita akan membahas cara membuat sitemap sederhana pada blogger. Meski bisa dibuat secara manual, di WordPress kita bisa memakai plugin untuk membuat sitemap secara otomatis.

Sayangnya dukungan plugin ini tidak tersedia untuk pengguna Blogger (Blogspot). Namun jangan khawatir, masih ada banyak cara lain untuk membuat sitemap di Blogger.

     Baca juga : Apa itu Sitemap ?

Untuk membuatnya, kamu hanya perlu menyalin kode Javascript dan CSS di bawah ini. Untuk memasukan kode tersebut, simak cara berikut:

• Javascript – Buat laman baru melalui menu PAGES » NEW PAGE lalu beri judul “sitemap” atau “arsip”. Pilih teks editor HTML lalu salin kode Javascript dan segera simpan.
• CSS – Menambahkan kode CSS di Blogger bisa dilakukan dengan dua cara. Salah satunya adalah dengan menyalin kode CSS di atas tag </style> atau ]]></b:skin>.

PENTING! Sebelum menggunakan kode berikut ini, pastikan kamu mengaktifkan Blog Feed terlebih dahulu. Caranya? Masuk ke menu SETTINGS » OTHER, lalu pada bagian ALLOW FEED, pilih opsi selain NONE.

Aktifkan blog feed sebelum buat sitemap Blogger

1. Cara Buat Sitemap Sederhana di Blogger

Cara ini adalah cara sederhana untuk menampilkan daftar semua pos di Blogger. Daftar judul postingan akan diurutkan berdasarkan waktu publikasi sehingga pembaca dapat melihat urutan pos secara kronologis.
Dengan kode ini, tampilan sitemap yang kita buat akan tampak seperti ini.

Hasil jadi sitemap Blogger yang akan kita buat

Untuk membuatnya, buat laman baru lalu salin kode Javascript berikut:

<div id="sitemap">Loading...</div>
<script> //<![CDATA[
var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='';for(var x=0;x<sitemapArr.length;x++){print+='<li><a href=\"'+sitemapArr[x].url+'\" title=\"'+sitemapArr[x].judul+'\">'+sitemapArr[x].judul+'</a></li>'}
elem.innerHTML='<div class=\"title\">Total Post: '+sitemapArr.length+'</div><ol>'+print+'</ol>'}}} runsitemap();
//]]> </script>code-box

Setelah itu salin kode CSS ini di atas tag </style> atau ]]></b:skin>.

/* Sitemap Blogger Sederhana */
#sitemap .title {background-color:#448ccb; color:#fff; font-size:150%; font-weight:400; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap a {color:#212121; text-decoration:none; transition:all .3s ease;}
#sitemap a:hover {color:#000;}
#sitemap ol {margin:0px; padding:0px;}
#sitemap ol li {color:#212121; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}code-box

Psssttt, habis baca ini jangan lupa cek postingan ‘cara membuat sitemap keren‘ juga yah!

2. Cara Buat Sitemap di Blogger Sesuai Urutan Abjad

Selain diurutkan berdasarkan waktu postingan, daftar pos pada sitemap Blogger juga bisa diurutkan berdasarkan abjad (alfabetis). Untuk melakukannya, kita akan mengubah sedikit kode Javascript yang digunakan sebelumnya menjadi,

<div id="sitemap">Loading...</div>
<script> //<![CDATA[
var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='',a=sitemapArr.sort(function(a,b){return a.judul>b.judul?1:-1});for(var x=0;x<a.length;x++){print+='<li><a href=\"'+a[x].url+'\" title=\"'+a[x].judul+'\">'+a[x].judul+'</a></li>'} elem.innerHTML='<div class=\"judul\">Total Post: '+a.length+'</div><ol>'+print+'</ol>'}}} runsitemap();
//]]> </script>code-box

Selesai sudah! Saya harap tutorial ini bisa membantu kamu membuat sitemap di Blogger dengan mudah. Jika ada pertanyaan, jangan segan untuk meninggalkan komentar kamu di bawah ini.