Sitemap Blogger di Halaman Statis Hanya Judul Berdasarkan Abjad (Alfabetis)

Sitemap Daftar Isi Blogger di Hanya Judul Berdasarkan Abjad

Jenis sitemap atau daftar isi postingan Blogger kali ini kurang lebih sama dengan versi sitemap sederhana hanya judul saja. Namun jika versi sebelumnya diurutkan berdasarkan tanggal posting, maka kali ini diurutkan secara ascending berdasarkan abjad (alfabetis) mulai dari huruf A sampai Z. Sitemap jenis ini sangat bagus dan umum digunakan oleh blog dengan niche download, baca novel ebook online, mp3, dan sejenisnya karena pengunjung bisa lebih mudah mencari postingan berdasarkan judul. Langsung saja ke scriptnya ya.

Simpan kode CSS berikut DI ATAS </style> atau ]]></b:skin>.

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

Lalu buat sebuah page (halaman statis) baru dan pilih mode HTML ketika menulis, jangan Compose. Salin dan simpan semua script di bawah ke dalam text editor. Ini murni pakai Javascript saja ya, bukan jQuery.

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

Setelah selesai, jangan lupa publikasikan dan hasil dari sitemap yang disusun alfabetis ini akan persis seperti demo di Codepen saya.

Jika ingin mencoba versi lain, silakan coba beberapa jenis sitemap berikut:

  1. Sitemap dengan navigasi per huruf (cocok untuk judul anime, film, atau lagu)
  2. Sitemap dengan judul, label, dan tanggal
  3. Sitemap dropdown dikelompokkan berdasarkan label
  4. Sitemap berdasarkan satu label

Artikel Terkait

6 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.
  • Gigend Workspace
    23 September, 2020
    Profil: https://www.blogger.com/profile/02915567621247226126
    ganti bulletingnya gimana ya mas?
  • Kurniawan
    18 Juli, 2020
    Profil: https://www.blogger.com/profile/15569497810744969348
    tes <ul class='comment-message'>
  • Gudang software
    19 Juni, 2020
    Profil: https://www.blogger.com/profile/01149477860642051161
    Gagal ngak bisa cuma tampil loding doang
  • Giri Diwa Adam
    13 Februari, 2019
    Profil: https://www.blogger.com/profile/11346759223421693465
    izin Share Ulang Mbak
  • Pediaku
    08 Februari, 2019
    Profil: https://www.blogger.com/profile/00374823826946390306
    Makasih mbak Igniel
  • Unknown
    03 Februari, 2019
    Profil: https://www.blogger.com/profile/09007809204099428417
    Akhirnya dapat daftar isi yang model beginian....Amazing banget
    Langsung diterapin diblog aku....