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

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Gigend Workspace
    13/6/21
    Profil: https://www.blogger.com/profile/02915567621247226126
    kalau diurutannya sebaliknya gimana mbak, dari yang terlama turun sampai yang terbaru?
  • Ali Hyuuga
    18/5/20
    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/3/20
    Profil: https://www.blogger.com/profile/13753019867963016613
    Tidak bisa lebih dari 150 postingan ya
    • Igniel
      11/3/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa banget. Jumlahnya sesuai postingan asli.
  • Ian Konjo
    16/7/19
    Profil: https://www.blogger.com/profile/11207870479116485915
    Jika ingin di tambahkan halaman navigasi gimana ya mbak?
    • Igniel
      16/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Navigasi gimana maksudnya mas?
    • Ian Konjo
      24/7/19
      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/3/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Oh itu...
      Iya nanti kalau ada waktu segera diupdate.