Cara pasang sitemap di halaman statis - Mengelola Blog

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

2 CARA MEMASANG SITEMAP-DAFTAR ISI BLOG


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
    cara 1 - alamat url javascript ditampilkan
  2. Tampilan view page source untuk cara #2
    isi file javascript sitemap ditampilkan

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
Daftar isi [ Lihat ]
SHARE
17 komentar
  1. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
    Balasan
    1. Aditya Said :

      Saya sudah coba semuanya, tetap gk bisa dipake di template saya di blog saya ..

      Mungkin struktur template nya ngga cocok mas Aditya, atau feed blognya mas bermasalah. Soalnya kalau template bawaan blogger setau saya jarang yang gagal sih asal feed blognya juga sudah jalan.

      Coba cek feed blognya dulu mas. .

      Hapus
    2. Sudah saya coba di template ini bisa dipakai mas, mungkin struktur templatenya ga cocok.

      Hasil coba bisa liat di SS SINI

      Hapus
    3. SUdah saya coba kedua cara diatas ttp gk bisa. Tapi klw dipake buat blog lain bisa.

      Ini kenapa ya mas?

      Apa ada msalah di templatenya?

      Mohon penjlsannya.

      Hapus
    4. Saya cek di blog yang Android-nya sudah bisa itu mas . . ada yang salah pemasangan kah sebelumnya ?

      Hapus
  2. hallo mas, sudah saya coba keduanya tetapi daftar isi nya tidak munncul, hanya halaman kosong dengan judul

    BalasHapus
    Balasan
    1. Kemungkinan besar itu struktur templatenya mas yang ga cocok. Kalau mau mas bisa coba pakai template bawaan blogger yg simple. Kalau bisa berarti struktur template yg mas gunakan saat ini memang ngga bisa pakai kedua cara diatas.

      Mudahan bisa membantu :)

      Hapus
  3. Klo untuk sitemap/dftr isi per label di menu navigasi pakai yg mana gan,,,?

    BalasHapus
    Balasan
    1. Menu yang diatas ya maksudnya ? coba gan liat postingan yang tentang cara buat menu horisontal dengan css dialamat url ini

      http://www.mengelolablog.com/2017/07/membuat-menu-horizontal-responsive-dengan-css.html

      Hapus
  4. terima kasih sekali bray, sudah saya praktikkan dan 100% work.
    sukses selalu ya..
    ditunggu artikel lainnya

    BalasHapus
    Balasan
    1. Ya sama-sama mas Burhan terima kasih kembali sudah sudi berkomentar disini, semoga bisa bermanfaat :)

      Hapus
  5. Alhamdulillah, untuk cara pertama, dengan mencoba mengetes linknya, jika keluar kodenya secara lengkap, maka sitemap yang kita buat berhasil.

    Saya sudah buktikan, untuk admin terimakasih banyak. Semoga yang lain juga berhasil.

    BalasHapus
    Balasan
    1. Terima kasih mas Wafa atas komentar positifnya semoga sukses selalu :)

      Hapus
  6. terima kasih banyak bang, walaupun sitempas ane gk mau muncul mulu-_

    BalasHapus
    Balasan
    1. Usahakan sekali edit sekali pasang gan dan jangan dibuka2 lagi. Soalnya kalau diedit suka berubah kodenya dan akhrinya jadi ngga fungsi lagi.

      Hapus
  7. makasih ya mas berkat mas saya bisa memasang sitemap untuk pertama kalinya
    sebelumnya saya sudah hampir 20x cari artikel cara membuat sitemap tetapi tidak ada satupun yang benar semuanya blank ketika di coba,pas mampir di mas dengan menggunakan kode yang panjang akhirnya bisa, membantu banget makasih ya :)

    BalasHapus
    Balasan
    1. Sama-sama mas... senang bisa bermanfaat 😊

      Hapus