Sitemap (Daftar Isi) Blogger di Halaman Statis dengan Judul, Label, dan Tanggal Posting

Sitemap (Daftar Isi) Blogger di Halaman Statis dengan Judul, Label, dan Tanggal

Sitemap adalah kumpulan link yang menampilkan seluruh isi artikel, bisa juga diebut sebagai daftar isi. Sitemap digunakan untuk memudahkan pengunjung dalam mengeksplorasi blog secara menyeluruh. Sitemap kali ini menampilkan data yang cukup lengkap, yaitu judul, label (kategori), dan tanggal posting.

Secara default, isi sitemap disusun secara ascending, yaitu diurutkan mulai dari postingan terbaru sampai terlama berdasarkan tanggal terbit. Tapi pengunjung tetap bisa menyortir daftar isi secara ascending atau descending berdasarkan judul, tanggal, atau label ketika meng-klik judul tabel. Scriptnya murni menggunakan Javascript saja, tidak perlu memanggil library jQuery segala.

Tampilan daftar isinya berupa table yang responsif, akan menyesuaikan dengan semua jenis ukuran layar baik desktop maupun mobile.

Cara Memasang Daftar Isi Sitemap Blogger dalam Halaman Statis

  1. Pergi ke menu Pages (Halaman).
  2. Buat sebuah halaman baru dengan klik tombol New page (Halaman baru).
  3. Pilih metode menulis HTML, bukan Compose.
  4. Salin semua kode berikut dan simpan di dalam tempat postingan. Setelah selesai, terbitkan dengan cara klik tombol Publish (Publikasikan).
<div id="sitemap2">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap with Title, Label, and Date */
var postTitle = postUrl = postDate = postSum = postLabels = new Array(), sortBy = 'datenewest', tocLoaded = false, numChars = 250, postFilter = '', tocdiv = document.getElementById('sitemap2'), totalEntires = 0, totalPosts = 0;
function sitemap2(t){function e(){if("entry"in t.feed){var e=t.feed.entry.length;if(totalEntires+=e,totalPosts=t.feed.openSearch$totalResults.$t,totalPosts>totalEntires){var s=document.createElement("script");s.type="text/javascript",startindex=totalEntires+1,s.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=9999&alt=json-in-script&callback=sitemap2"),tocdiv.appendChild(s)}for(var o=0;e>o;o++){for(var a,l=t.feed.entry[o],r=l.title.$t,i=l.published.$t.substring(0,10),n=0;n<l.link.length;n++)if("alternate"==l.link[n].rel){a=l.link[n].href;break}if("content"in l)var p=l.content.$t;else if("summary"in l)var p=l.summary.$t;else var p="";var c=/<\S[^>]*>/g;if(p=p.replace(c,""),p.length>numChars){p=p.substring(0,numChars);var d=p.lastIndexOf(" ");p=p.substring(0,d)+"..."}var f="";if("category"in l){for(var n=0;n<l.category.length;n++)f+="<a href=\"javascript:filterPosts('"+l.category[n].term+"');\" title=\"Click here to select all posts with label '"+l.category[n].term+"'\">"+l.category[n].term+"</a>,  ";var u=f.lastIndexOf(",");-1!=u&&(f=f.substring(0,u))}postTitle.push(r),postDate.push(i),postUrl.push(a),postSum.push(p),postLabels.push(f)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc())}e(),sortPosts(sortBy),tocLoaded=!0}function filterPosts(t){postFilter=t,displayToc(postFilter)}function allPosts(){postFilter="",displayToc(postFilter)}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;var s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;var s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;var s=postSum[t];postSum[t]=postSum[e],postSum[e]=s;var s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o)}function displayToc(t){var e=0,s="",o="Judul",a="Klik untuk mengurutkan berdasarkan judul",l="Tanggal",r="Klik untuk mengurutkan berdasarkan tanggal",i="Label",n="";"titleasc"==sortBy&&(a+=" (descending)",r+=" (newest first)"),"titledesc"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"dateoldest"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"datenewest"==sortBy&&(a+=" (ascending)",r+=" (oldest first)"),""!=postFilter&&(n="Klik untuk melihat semua postingan"),s+='<table>',s+="<thead>",s+="<tr>",s+="<th>",s+='<a href="javascript:toggleTitleSort();" title="'+a+'">'+o+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:toggleDateSort();" title="'+r+'">'+l+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:allPosts();" title="'+n+'">'+i+"</a>",s+="</th>",s+="</tr>",s+="</thead>",s+="<tbody>";for(var p=0;p<postTitle.length;p++)""==t?(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++):(z=postLabels[p].lastIndexOf(t),-1!=z&&(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++));if(s+="</tbody>",s+="</table>",e==postTitle.length)var c='<div class="judul">Total Post: '+postTitle.length+"</div>";else{var c='<div class="judul">Menampilkan '+e+" post berlabel '";c+=postFilter+"' dari "+postTitle.length+" total post.</div>"}tocdiv.innerHTML=c+s}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc",sortPosts(sortBy),displayToc(postFilter)} function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest",sortPosts(sortBy),displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);document.getElementById("toclink")}else alert("Just wait. Sitemap is loading....")} function hideToc(){var t=document.getElementById("toc");t.innerHTML="";var e=document.getElementById("toclink");e.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">» Show Sitemap</a>'}var postTitle=new Array,postUrl=new Array,postDate=new Array,postSum=new Array,postLabels=new Array,sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("sitemap2"),totalEntires=0,totalPosts=0;
//]]> </script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=sitemap2"></script>


Saatnya mempercantik tampilan. Pergi ke menu Theme (Tema), klik tombol Edit HTML, dan simpan semua kode CSS ini DI ATAS </style> atau ]]></b:skin>.

/* Blogger Sitemap with Title, Label, and Date */
#sitemap2 .judul {font-size:150%; background-color:#2196f3; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:20px;}
#sitemap2 table {background-color:#fff; margin:0px; padding:0px; border:0px; border-collapse:collapse; border-spacing:0px; table-layout:fixed; width:100%;}
#sitemap2 table a, #sitemap2 table a:hover {text-decoration:none;}
#sitemap2 table thead {background-color:#008c5f; text-transform:uppercase;}
#sitemap2 table thead a {color:#fff; display:block;}
#sitemap2 table thead a:after {content:''; width:17px; height:17px; display:inline-block; float:right; margin:5px 3px 0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Cpath d='M11 7h-6l3-4z' fill='%23fff'/%3E%3Cpath d='M5 9h6l-3 4z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;}
#sitemap2 table thead tr th {font-weight:600; padding:10px; text-align:center; border:0px; margin:0px; line-height:2em;}
#sitemap2 table thead tr th:nth-child(2) {border-left:1px solid #fff; border-right:1px solid #fff; width:calc(100px + 20px);}
#sitemap2 table tbody tr {border:1px solid #ccc;}
#sitemap2 table tbody tr:first-child {border-top:0px;}
#sitemap2 table tbody tr:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap2 table tbody tr:nth-of-type(odd) {background-color:#fff}
#sitemap2 table tbody tr td {font-weight:400; padding:10px; color:#666; line-height:1.5em;}
#sitemap2 table tbody tr td a {color:#666;transition:all .3s ease;}
#sitemap2 table tbody tr td a:hover {color:#000;}
#sitemap2 table tbody tr td:nth-child(2) {white-space:nowrap; border-left:1px solid #ccc; border-right:1px solid #ccc; text-align:center;}
#sitemap2 table tbody tr td:first-child, #sitemap2 table thead tr th:first-child {width:67%;}
#sitemap2 table tbody tr td:nth-child(2), #sitemap2 table thead tr th:nth-child(2) {width:120px;}
#sitemap2 table tbody tr td:last-child, #sitemap2 table thead tr th:last-child {width:calc(33% - 120px);}
@media screen and (max-width:480px){
  #sitemap2 table tbody tr td, #sitemap2 table thead tr th {width:100% !important; word-break:break-word;}
}

- Sorot pada bagian judul table untuk mengetahui informasi penyortiran berdasarkan judul, tanggal, atau label.
- Sorot pada bagian judul artikel untuk melihat snippet (ringkasan postingan).

Selesai. Buka halaman statis yang baru dibuat tadi dan lihat hasilnya. Jika sukses akan sama persis seperti demo berikut.



Selesai sudah tutorial untuk membuat daftar isi sitemap Blogspot by label di halaman statis ini. Semoga berguna bagi para blogger di luaran sana.

Artikel Terkait

21 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Staff Reporter
    30 November, 2021
    Profil: https://www.blogger.com/profile/05339758196749330712
    mbak kalau yang masih mentahan belum di minify apa masih punya? kalau masih boleh minta kodenya?
  • Admin
    07 September, 2021
    Profil: https://www.blogger.com/profile/00567666684075915225
    Halo mbak.... Saya lupa nih, semenjak beli theme yg igniplex (juni kemarin), ternyata harus didaftarkan ke google search console ya?

    maklum mbak, new bie dari dulu. Ini baru saja Aku daftarkan, dan untuk membuat sitemap di atas, bisa diterapkan di theme yang Saya beli di mbak ya?

    terima kasih
  • Ega Adrian N.
    21 Mei, 2020
    Profil: https://www.blogger.com/profile/08675018576967236779
    hapus total post bisa gak mba?
  • PenggemarKoding
    26 Maret, 2020
    Profil: https://www.blogger.com/profile/07623735940325612830
    Not Fix, ada error dalam scriptnya
    • Igniel
      26 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak error. Kalo error demonya gak jalan.
  • FunBox
    27 November, 2019
    Profil: https://www.blogger.com/profile/14305355240928602317
    keren
  • Mas Hendra
    03 Mei, 2019
    Profil: https://www.blogger.com/profile/14099939507223196045
    saya sudah terapkan seperti cara di atas, tapi tidak berhasil.
  • SayaWRT
    14 Februari, 2019
    Profil: https://www.blogger.com/profile/11905176820841816636
    terimakasih tutorialnya. ada yang saya praktikan di blog saya pribadi. namun ada yang kurang dan saya ingin ubah lagi. supaya jika artikel sudah banyak maka akan memakan waktu loading juga.

    apakah ada cara lain, atau recent post dengan style yang lain.?
    • Igniel
      14 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di blog ini ada 6 jenis tutorial Sitemap. Silakan dicari dan dicoba satu per satu.
  • feryefend
    13 Februari, 2019
    Profil: https://www.blogger.com/profile/13411138414037980398
    ini sama kayak updatetan igniplex yg V2.3 kan mb? susunan tanggalnya kalau di balik jadi Hari-Bulan-Tahun bisa gak ya? Kebiasaan baca format tanggalan gitu hehe
  • Deka Firhansyah, S.I.P.
    05 Februari, 2019
    Profil: https://www.blogger.com/profile/10954932770596133977
    Keren mbak, mampir blog saya disini www.dekafirhansyah94.blogspot.com
  • Faisal Halim
    05 Februari, 2019
    Profil: https://www.blogger.com/profile/08080507273978118834
    mba di blog saya tidak mau muncul, loading terus
    • Igniel
      05 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ulangi lagi. Hapus dulu semuanya, tempel ulang dari awal.
    • Faisal Halim
      06 Februari, 2019
      Profil: https://www.blogger.com/profile/08080507273978118834
      masih utuh mba dan tiada perubahan sama sekali
    • Igniel
      06 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau pasangnya sesuai tutorial pasti work kaya di demonya.
    • Faisal Halim
      07 Februari, 2019
      Profil: https://www.blogger.com/profile/08080507273978118834
      sudah mengikuti tutorial dan sudah saya ulang 3 kali lebih halaman baru semua tapi tetap saja
    • Igniel
      07 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ulangi terus. Scriptnya nggak ada yang error. Yang lain lancar jaya.
    • kang-arief.com
      23 Februari, 2019
      Profil: https://www.blogger.com/profile/00304281694380197980
      yang ini di amp saya ga bisa Teh.. nuhun..
  • Rich Ard
    03 Februari, 2019
    Profil: https://www.blogger.com/profile/08181588658968702674
    makasih kk. ijin pasang ya..
  • Unknown
    01 Februari, 2019
    Profil: https://www.blogger.com/profile/09007809204099428417
    Kalau yang berdasarkan abjad ada nggak ya....
    • Igniel
      02 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada.
      https://www.igniel.com/2019/02/sitemap-daftar-isi-hanya-judul-abjad.html