Daftar Isi (Sitemap) Blogger Filter Menurut Abjad Keren

Daftar isi (sitemap) blogger ini mampu memuat lebih dari seribu posting, di filter menurut abjad, biasanya metode ini digunakan untuk membuat daftar anime di blog worpress. Kali ini kita akan menunjukkan caranya untuk bisa dipasang di blog blogger, namun kekurangannya belum bisa mengurutkan berdasarkan sorting.

Coba aja, mungkin berminat, Caranya:

1. Pastikan jquery ada "<script src="https://code.jquery.com/jquery-1.10.2.js"></script>".
2. Buat class urutan abjad.

   <div id="postList">
   <span class="alfabet">#</span><ul class="letter-0"></ul>
   <span class="alfabet">A</span><ul class="letter-a"></ul>
   <span class="alfabet">B</span><ul class="letter-b"></ul>
   <span class="alfabet">C</span><ul class="letter-c"></ul>
   <span class="alfabet">D</span><ul class="letter-d"></ul>
   <span class="alfabet">E</span><ul class="letter-e"></ul>
   <span class="alfabet">F</span><ul class="letter-f"></ul>
   <span class="alfabet">G</span><ul class="letter-g"></ul>
   <span class="alfabet">H</span><ul class="letter-h"></ul>
   <span class="alfabet">I</span><ul class="letter-i"></ul>
   <span class="alfabet">J</span><ul class="letter-j"></ul>
   <span class="alfabet">K</span><ul class="letter-k"></ul>
   <span class="alfabet">L</span><ul class="letter-l"></ul>
   <span class="alfabet">M</span><ul class="letter-m"></ul>
   <span class="alfabet">N</span><ul class="letter-n"></ul>
   <span class="alfabet">O</span><ul class="letter-o"></ul>
   <span class="alfabet">P</span><ul class="letter-p"></ul>
   <span class="alfabet">Q</span><ul class="letter-q"></ul>
   <span class="alfabet">R</span><ul class="letter-r"></ul>
   <span class="alfabet">S</span><ul class="letter-s"></ul>
   <span class="alfabet">T</span><ul class="letter-t"></ul>
   <span class="alfabet">U</span><ul class="letter-u"></ul>
   <span class="alfabet">V</span><ul class="letter-v"></ul>
   <span class="alfabet">W</span><ul class="letter-w"></ul>
   <span class="alfabet">X</span><ul class="letter-x"></ul>
   <span class="alfabet">Y</span><ul class="letter-y"></ul>
   <span class="alfabet">Z</span><ul class="letter-z"></ul>
   </div>

3. Scrip untuk mengisi class yang telah dibuat tadi.

   <script type="text/javascript">
   var startIndex = 1;
   var maxResults = 100;
   
   function sendQuery12(){
      var scpt = document.createElement("script");
      scpt.src = "https://ragelem.blogspot.com/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
   
      document.body.appendChild(scpt);
   }
   
   function processPostList12(root){ 
      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){
                     var liE = document.createElement("li");
                     var a1E = document.createElement("a");
                     a1E.href = url;
                     a1E.textContent = title;
                     liE.appendChild(a1E);
         var ggs = url.split("/")[5].charAt(0).replace(/[0-9]/g,'0') || "0";
         var sclass = ".letter-"+ggs;
         var element = document.querySelector(sclass);
         var zelemen = document.querySelector(".letter-0");
         if (element !== null) {
        element.appendChild(liE);
         }else{
           zelemen.appendChild(liE);
         }
                  }
                  break;
               }
            }
         }
    
   
         if (feed.entry.length >= maxResults){
            startIndex += maxResults;
            sendQuery12();
         }
      }
   }
   
   sendQuery12();
   </script>

4. Selesai dan lihat hasilnya.

Demo