Auto Index Anime List in Blogger

Mengurus Anime List di Blogger memanglah sangat membosankan, merepotkan & melelahkan, tidak hanya itu kita bisa saja membuang-buang waktu hanya untuk menuliskan
sebuah tautan dan itupun berkali-kali setiap ada List anime yang baru ingin ditambahkan. Namun kali ini saya akan membagikan tutorial cara membuat Auto Index Anime List di Blogger supaya memudahkan pengguna blogger fansub ataupun fanshare dalam mengurus Anime Listnya. Dan tutorial ini cukup mudah untuk kita pelajari, simak langsung tutorialnya dibawah ini:

1. Pertama, kalian perlu melabeli postingan atau menambahkan label dengan huruf abjad Kapital A - Z sesuai huruf abjad pertama nama Anime/Postingan tersebut.

Contoh:
Apabila judul Anime tersebut adalah Naruto Shippuden maka kita labeli dengan huruf N

2. Kedua, buat sebuah halaman atau gunakan halaman khusus Anime List yang sudah kalian buat sebelumnya. Jika sudah kita edit halaman tersebut, kita pergi ke tab HTML. Selanjutnya copy CSS dibawah ini dan pastekan kedalam halaman blog Anime List tadi.

<style>
.listanim-wrapper{max-width:1060px;margin:auto}
.abjad{padding:1px 0;text-align:center;margin:0 0 5px 0}
.abjad a{display:block;padding:5px 0;width:26.7px;float:left;background:#424242;font-weight:500;color:#FFFFFF;text-decoration:none;}
.abjad a:hover{background: #2977BE;text-decoration: none;}
.clear{clear:both}
.grup-judul{font-family:segoe ui;font-weight:bold;color:#333;font-size:13px;border-bottom:2px solid #2977BE;margin-bottom:5px;background:none;padding:5px;text-transform:uppercase;position:relative;clear: both;}
.grup ul li{width:50%;float:left;}
@media screen and (max-width:900px){.grup ul li{width:100%;float:none;clear:both;}.abjad a{}}
</style>

3. Terakhir, copy kode HTML dan JavaScript dibawah ini kemudian pastekan tepat dibawah kode CSS diatas tadi.

<div class='listanim-wrapper'>
 <script type="text/javascript">
 var numposts = 999;
 var standardstyling = true;
 function showrecentposts(json){
  for(var i = 0; i < numposts; i++){ 
   var entry = json.feed.entry[i]; 
   var posttitle = entry.title.$t; 
   var posturl;
   if (i == json.feed.entry.length)
    break; 
   for(var k = 0; k < entry.link.length; k++){
    if(entry.link[k].rel == 'alternate'){
     posturl = entry.link[k].href;
     break;
    }
   }
   posttitle = posttitle.link(posturl); 
   if(standardstyling)
    document.write('<li>');
   document.write(posttitle);
  }
  if(standardstyling)
   document.write('</li>');
 } 
 </script>
 <div class='abjad'><a href="#0">0</a> <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a><div class="clear"></div></div>
 <div class='content-list'>
  <div class='grup'><div class='grup-judul'><a name="0">0</a></div>
   <ul>
    <script src="/feeds/posts/default/-/0?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="A">A</a></div>
   <ul>
    <script src="/feeds/posts/default/-/A?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="B">B</a></div>
   <ul>
    <script src="/feeds/posts/default/-/B?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="C">C</a></div>
   <ul>
    <script src="/feeds/posts/default/-/C?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="D">D</a></div>
   <ul>
    <script src="/feeds/posts/default/-/D?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="E">E</a></div>
   <ul>
    <script src="/feeds/posts/default/-/E?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="F">F</a></div>
   <ul>
    <script src="/feeds/posts/default/-/F?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="G">G</a></div>
   <ul>
    <script src="/feeds/posts/default/-/G?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="H">H</a></div>
   <ul>
    <script src="/feeds/posts/default/-/H?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="I">I</a></div>
   <ul>
    <script src="/feeds/posts/default/-/I?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="J">J</a></div>
   <ul>
    <script src="/feeds/posts/default/-/J?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="K">K</a></div>
   <ul>
    <script src="/feeds/posts/default/-/K?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="L">L</a></div>
   <ul>
    <script src="/feeds/posts/default/-/L?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="M">M</a></div>
   <ul>
    <script src="/feeds/posts/default/-/M?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="N">N</a></div>
   <ul>
    <script src="/feeds/posts/default/-/N?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="O">O</a></div>
   <ul>
    <script src="/feeds/posts/default/-/O?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="P">P</a></div>
   <ul>
    <script src="/feeds/posts/default/-/P?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="Q">Q</a></div>
   <ul>
    <script src="/feeds/posts/default/-/Q?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="R">R</a></div>
   <ul>
    <script src="/feeds/posts/default/-/R?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="S">S</a></div>
   <ul>
    <script src="/feeds/posts/default/-/S?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="T">T</a></div>
   <ul>
    <script src="/feeds/posts/default/-/T?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="U">U</a></div>
   <ul>
    <script src="/feeds/posts/default/-/U?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="V">V</a></div>
   <ul>
    <script src="/feeds/posts/default/-/V?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="W">W</a></div>
   <ul>
    <script src="/feeds/posts/default/-/W?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="X">X</a></div>
   <ul>
    <script src="/feeds/posts/default/-/X?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="Y">Y</a></div>
   <ul>
    <script src="/feeds/posts/default/-/Y?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
  <div class='grup'><div class='grup-judul'><a name="Z">Z</a></div>
   <ul>
    <script src="/feeds/posts/default/-/Z?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
   </ul>
  </div>
 </div>
</div>

Nah, sampai disini tutorial selesai cara membuat Anime List yang otomatis terindex di blogger. Sekian semoga tutorial ini bermanfaat.

Sumber CSS, HTML & JavaScript:
Arleth98

Author : Ex10sionlabs

Belum sukses.

Share this

Related Posts