Sitemap (Daftar Isi) Blogger di Halaman Statis Hanya Judul Saja

Sitemap (Daftar Isi) Blogger di Halaman Statis Hanya Judul Saja

Sitemap alias daftar isi Blogspot jenis ini sangat simple dan fast loading karena hanya menampilkan judul saja. Daftar postingan diurutkan menurut tanggal postingan diterbitkan, mulai dari yang terbaru sampai terlama.

Ini kode CSSnya. Simpan DI ATAS </style> atau ]]></b:skin>.

/* Blogger Sitemap Simple Title Only */
#sitemap3 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap3 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap3 a:hover {color:#000;}
#sitemap3 ol {margin:0px; padding:0px;}
#sitemap3 ol li {color:#666; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}

Lalu kode utama untuk menampilkan daftar isi Blogger ini disimpan ke dalam page (halaman statis). Ketika menulis pastikan memilih metode HTML, bukan Compose. Salin semua kode berikut ke dalam text editor (tempat menulis).

<div id="sitemap3">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Simple Title Only */
var start=1;var max=150;var sitemap3Arr=new Array();function runSitemap3(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap3&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap3(root){var elem=document.getElementById('sitemap3');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){sitemap3Arr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runSitemap3()} else{var print='';for(var x=0;x<sitemap3Arr.length;x++){print+='<li><a href=\"'+sitemap3Arr[x].url+'\" title=\"'+sitemap3Arr[x].judul+'\">'+sitemap3Arr[x].judul+'</a></li>'}
elem.innerHTML='<div class=\"judul\">Total Post: '+sitemap3Arr.length+'</div><ol>'+print+'</ol>'}}} runSitemap3();
//]]> </script>

Kode di atas hanya menggunakan Javascript murni, tidak perlu menggunakan jQuery segala. Contoh dari sitemap simple hanya judul saja yang diurutkan berdasarkan tanggal terbaru bisa dicek di Codepen saya.



Kalau mau diurutkan berdasarkan abjad mulai dari A sampai Z, silakan coba Sitemap Blogger Berdasarkan Abjad. Jenis ini bagus untuk blog dengan niche download, baca novel ebook online, mp3, dan sejenisnya karena pengunjung bisa lebih mudah mencari postingan berdasarkan judul.

Artikel Terkait

8 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> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Gigend Workspace
    13 Juni, 2021
    Profil: https://www.blogger.com/profile/02915567621247226126
    kalau diurutannya sebaliknya gimana mbak, dari yang terlama turun sampai yang terbaru?
  • Ali Hyuuga
    18 Mei, 2020
    Profil: https://www.blogger.com/profile/06361308303600420638
    Maaf mbak, kenapa ya sitemap saya di search console eror terus "Tidak dapat mengambil peta situs"

    Kasih pencerahan donk 🙏
  • Namina Kiky
    11 Maret, 2020
    Profil: https://www.blogger.com/profile/13753019867963016613
    Tidak bisa lebih dari 150 postingan ya
    • Igniel
      11 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa banget. Jumlahnya sesuai postingan asli.
  • Ian Konjo
    16 Juli, 2019
    Profil: https://www.blogger.com/profile/11207870479116485915
    Jika ingin di tambahkan halaman navigasi gimana ya mbak?
    • Igniel
      16 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Navigasi gimana maksudnya mas?
    • Ian Konjo
      24 Juli, 2019
      Profil: https://www.blogger.com/profile/11207870479116485915
      Kayak ada halaman 1,2,3 dst. Atau apa it namanya. Hehehe
      .
      Kan terlalu panjang k bawah klo postingannya banyk mbak.
      .
      Atau misal kayak infiniti scrol gitu mbak.
      .
      Kayak ini mbak https://www.igniel.com/2018/08/navigas-halaman-nomor.html
    • Igniel
      11 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Oh itu...
      Iya nanti kalau ada waktu segera diupdate.