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.

SHARE Pin Share
Artikel Terkait
7 komentar
  1. Jika ingin di tambahkan halaman navigasi gimana ya mbak?

    BalasHapus
    Balasan
    1. Navigasi gimana maksudnya mas?

      Hapus
    2. 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

      Hapus
    3. Oh itu...
      Iya nanti kalau ada waktu segera diupdate.

      Hapus
  2. Tidak bisa lebih dari 150 postingan ya

    BalasHapus
    Balasan
    1. Bisa banget. Jumlahnya sesuai postingan asli.

      Hapus
  3. Maaf mbak, kenapa ya sitemap saya di search console eror terus "Tidak dapat mengambil peta situs"

    Kasih pencerahan donk šŸ™

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!