Cara pasang sitemap di halaman statis

Artikel ini saya buat untuk memenuhi pertanyaan yang di ajukan oleh pengunjung mengelolablog.com dengan akun bernama Warman Istiqomah. Kebetulan Mas warman ini mengalami kendala dan belum berhasil saat mencoba untuk mempraktekkan artikel yang berisi tentang Cara mengatasi daftar isi blog / sitemap yang tidak tampil.

Mudah-mudahan artikel ini bisa membantu untuk mempercepat keberhasilan pemasangan sitemap di blog pembaca sekalian sekaligus menambah pengetahuan saat mengelola blog.

Pemasangan halaman sitemap atau daftar isi blog ini bisa dilakukan dalam 2 cara, cara pertama yaitu dengan menyimpan file Javascript untuk sitemap di luar template. Cara yang kedua adalah dengan memasang langsung file javascript untuk sitemap langsung didalam halaman (pages) daftar isi blog.

Masing-masing cara memiliki kelebihan dan kekurangan, tinggal pilih saja mana yang baik dan sesuai untuk Anda gunakan. Mari kita coba satu persatu kedua cara tersebut diatas

Cara #1 - Halaman sitemap yang file javascriptnya disimpan di luar template

Cara #1 ini adalah cara yang termudah untuk dilakukan, karena Anda tinggal mengcopy-paste script yang saya berikan di bawah kedalam halaman untuk sitemap yang Anda buat.

Namun perlu diperhatikan bahwa script yang digunakan untuk sitemap ini letaknya ada di situs yang lain. Pada contoh kali ini, file javascript untuk sitemap disimpan didalam situs Github.  Silahkan ikuti langkahnya seperti dibawah berikut untuk membuat halaman sitemapnya

1. Masuk ke Blogspot Anda.
2. Pilih blog yang ingin diperbarui.
3. Di menu sebelah kiri, pilih Laman (pages).
4. Klik New Page untuk membuat halaman baru
5. Isikan kolom judul dengan nama sitemap atau Daftar isi blog
6. Pindahkan mode penulisan ke mode HTML pada tombol yang terletak disisi kiri atas
7. Copy script dibawah berikut dan pastekan kedalam halaman untuk sitemap
   

   <script style="text/javascript" src="https://cdn.staticaly.com/gh/TeC1981/mengelolablog/48fdbe75/sitemap.js"></script><script src="https://www.mengelolablog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

   catatan : Ganti tulisan berwarna merah www.mengelolablog.com dengan alamat URL blog Anda
8. Klik Publish untuk menerbitkan halaman tersebut.

Setelah Anda mengklik publish, maka halaman sitemap Anda seharusnya sudah jadi seperti pada contoh yang bisa Anda lihat hasilnya di halaman sitemap berikut ini Test Sitemap page

Mudah bukan ? sekarang kita akan lanjutkan cara membuat sitemap dengan file javascript yang di masukkan kedalam artikel (disimpan dalam template)

Cara #2 - Halaman sitemap yang file javascriptnya disimpan didalam template (pages)

Sebenarnya metode yang digunakan sama persis seperti yang dilakukan di artikel sebelumnya, yang membedakan hanyalah letak dan penempatan file Javascript untuk sitemapnya.

Jika di artikel sebelumnya Anda perlu mencari file javascript yang berfungsi di blog-blog lain, di artikel ini file javascriptnya nya sudah saya siapkan sekaligus sudah saya coba keberhasilannya di halaman test sitemap page yang sengaja saya buat untuk artikel ini.

Silahkan buka alamat URL dibawah ini pada tab baru untuk melihat kode javascript yang digunakan untuk sitemap di blog ini (copy paste kode yang tampil lalu simpan kedalam aplikasi notepad jika diperlukan)

https://cdn.staticaly.com/gh/TeC1981/mengelolablog/48fdbe75/sitemap.js

Kemudian kita bersiap untuk membuat halaman sitemap dengan meletakkan file javascript didalam laman. Langkah-langkahnya sama dengan langkah diatas, namun ada perbedaan pada langkah ke 7 yaitu scriptnya lebih banyak dan lebih panjang daripada cara #1 tadi, simak langkahnya dibawah berikut

1. Masuk ke Blogspot Anda.
2. Pilih blog yang ingin diperbarui.
3. Di menu sebelah kiri, pilih Laman (pages).
4. Klik New Page untuk membuat halaman baru
5. Isikan kolom judul dengan nama sitemap atau Daftar isi blog
6. Pindahkan mode penulisan ke mode HTML pada tombol yang terletak disisi kiri atas
7. Copy dan pastekan script dibawah berikut kedalam halaman untuk sitemap 

   <script style="text/javascript">

   var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><a href="https://www.mengelolablog.com/2017/02/cara-pasang-sitemap-dihalaman-statis.html" style="font-size: 10px; text-decoration:none; color: #616469;">Sitemap</a>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src="http://radiorodja.googlepages.com/new_1.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link    : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3  : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};

   </script>

   <script src="https://www.mengelolablog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

   Jangan lupa untuk mengganti tulisan berwarna merah www.mengelolablog.com dengan alamat URL blog Anda
8. Setelah Anda pastekan, langsung klik tombol publish untuk menerbitkan halaman sitemap tersebut.

Di cara #2 ini, saya mencoba beberapa kali untuk mengcopy paste kode tersebut kedalam halaman sitemap yang baru, dan kode tersebut sudah  berhasil untuk digunakan.  Untuk hasil dari penerapan cara #2 ini bisa Anda lihat hasilnya di halaman Test Sitemap Page2

Membedakan hasil penerapan Cara #1 dengan Cara #2

Jika diperhatikan halaman hasil sitemapnya, cara #1 dengan cara #2 tidak banyak berbeda, namun untuk memastikan kebenaran cara yang digunakan, Anda dapat menggunakan view page source di masing-masing halaman sehingga kita bisa melihat perbedaannya.

Untuk menggunakan view page source di browser, lakukan klik kanan pada mouse, lalu pilih lihat sumber halaman pada kotak yang terbuka.

Berikut tampilan perbedaan dari cara #1 dengan cara #2 melalui view page source browser

1. Tampilan view page source untuk cara #1
   
   
2. Tampilan view page source untuk cara #2
   
   

Perlu pembaca ketahui bahwa kedua cara diatas terkadang juga bisa tidak berfungsi dibeberapa template yang berbeda. Hal ini terkait dengan susunan dan struktur masing-masing template yang berbeda-beda juga.

Untuk cara #1, umumnya tidak akan ada masalah selama alamat url untuk file javascript masih bisa diakses dan tetap terbuka, namun akan lain halnya jika kita menerapkan cara #2.

Dalam percobaan-percobaan yang saya lakukan saat menerapkan cara #2 memang tidak sekali jadi. Bahkan pada beberapa kondisi,  jika saya membuka Pages/ halaman yang berisi script sitemap tersebut lalu mengeditnya, seringkali kodenya menjadi error sehingga sitemap/daftar isi blog menjadi tidak mau tampil.

Ketika error terjadi, maka yang saya lakukan adalah membuka file notepad berisi script sitemap yang sudah saya simpan sebelumnya, lalu saya ganti semua script yang ada dihalaman tersebut dengan script yang baru.

Atas kondisi tersebut, maka setelah halaman sitemap ini berfungsi dan sudah terpasang dengan script yang baru, halaman sitemap ataupun arsip ini tidak pernah saya buka atau edit kembali.


Kesimpulan

Memasang script untuk sitemap secara langsung kedalam halaman statis seperti cara #2 diatas memiliki keunggulan tersendiri yaitu halaman sitemap tidak terpengaruh dan tidak mudah error akibat kondisi eksternal.

Namun disatu sisi, kesulitan saat pemasangan serta saat ingin melakukan editing menjadi kendala yang akan dihadapi, halaman menjadi error sehingga perlu mengulang kembali pemasangannya.

Demikianlah artikel tentang 2 cara memasang script sitemap di Blog ini bisa saya sampaikan. Semoga bisa bermanfaat dan semoga berhasil

Update 8 Oktober 2018
-Karena rawgit tutup, maka file sitemap github dialihkan dari cdn.rawgit ke cdn.staticaly