Auto Index Anime list Responsive Blogger


Pagi semuanya, kali ini saya akan membagikan tutorial Cara Membuat Auto Index Anime List. Pasti kamu pernah merasa malas & lelah mengurus Anime list/ Daftar Isi blog kalian dikarenakan konten atau postingan blog tersebut terlalu banyak, makanya dari itu saya disini akan membagikannya tips agar kalian tidak perlu mengedit atau mengisi Anime Listnya lagi, jadi kalian tidak kerepotan mengisi daftar isi setiap kali posting.

Ok kita mulai saja tutorialnya

  • Pertama Buka Blogger > Buat Postingan Berlabel dari A sampai Z berdasarkan Huruf Awal Judul Postingan Tersebut
  • Kedua, Buat Halaman/Page baru atau yang sudah ada silahkan kalian edit, Lalu Salin CSS dibawah ini masukkan ke Halaman blog kamu
<style>
/* CSS By Arleth98 */
.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>

  • Ketiga, Salin HTML & Javascript ini dan tempelkan dibawah CSS 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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
    </ul>
    </div>
    
    </div>
    </div>
    
    Demo

    Beri Label di Post dengan Huruf Kapital (Sesuai Abjad dari Huruf depan judul post)
    Contoh : Death Note > Label nya D

    Sekian tutorial dari saya, semoga bermanfaat buat kalian para blogger, Terima kasih.
    Related Posts
    How to style text in Disqus comments:
    • To write a bold letter please use <strong></strong> or <b></b>.
    • To write a italic letter please use <em></em> or <i></i>.
    • To write a underline letter please use <u></u>.
    • To write a strikethrought letter please use <strike></strike>.
    • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
      And use parse tool below to easy get the style.
    Show Parser Hide Parser

    Post a Comment On "Auto Index Anime list Responsive Blogger"

    Disqus Comments