Membuat List Auto Index Filter Abjad dengan Satu Label - ACREZY

Jika kamu sering menjumpai situs unduhan film ataupun anime pasti tidak asing dengan list atau daftar isi mereka.

Yep, pada kesempatan kali ini saya akan membagikan Cara Membuat List Auto Index Filter Abjad dengan Satu Label.

Hanya satu, butuh satu label saja tidak perlu memasukan banyak label.

Kelebihan List ini karena jika kamu mempublikasi postingan baru akan otomatis muncul di List tersebut, dengan syarat menggunakan label yang ada pada List.

Tertarik? langsung aja dibawah ini tutorialnya.

Membuat List Auto Index Filter Abjad dengan Satu Label

---

Masuk ke halaman Blogger.

Buat halaman baru dan jangan lupa gunakan mode HTML jangan Compose.

Ketikan judul halaman kamu sesuai keperluan.

Kemudian salin dan letakan kode berikut ke halaman tersebut.

<style type="text/css">
/* CSS List Auto Index Filter Abjad Dengan Satu Label */
#abjad-filted{bottom:0;left:0;right:0;text-align:center;width:100%;margin:auto;display:inline-block}
#abjad-filted a{display:inline-block;padding:5px 13px;color:#FFF;background:#333;transition:all .5s}
#abjad-filted a:hover{text-decoration:none;background:#222;transition:all .5s}
a.abjad-alfabet{font-size:17px;font-weight:700;border-bottom:3px solid #333;display:block;margin-top:10px;padding:2px 5px}
a.abjad-alfabet:before{content:'\f101';padding-right:5px;font-family:fontawesome}
ul.list-post{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;list-style:none;margin:5px auto;font-size:13px;line-height:22px}
ul.list-post li{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
ul.list-post li a{color:#333}
ul.list-post li a:hover{color:#ec2028;text-decoration:none}
ul.list-post li a:before{content:'\f054';font-family:fontawesome;display:block;float:left;margin-right:2px;font-weight:400;font-size:12px}
</style>
<script type="text/javascript">
/*<![CDATA[*/
function Index_anilist(a){this.abjad={};this.overkeys=[];this.grab=function(){var g=a.feed.entry;var c=g.length;for(var d=0;d<c;d++){if(d==c){break}var f=g[d];var h=f.title.$t;var i="";for(var b=0;b<f.link.length;b++){if(f.link[b].rel=="alternate"){i=f.link[b].href}}var e=h.substr(0,1).toLowerCase();var j={title:h,linkpost:i};if(typeof this.abjad[e]=="undefined"){this.abjad[e]=[j]}else{if(typeof this.abjad[e]=="object"){this.abjad[e].push(j)}}}};this.filter=function(){for(var b in this.abjad){this.overkeys.push(b);this.overkeys.sort()}};this.buildingscripts=function(){for(var c in this.overkeys){var j=this.overkeys[c];var i=j.toUpperCase();var e=this.abjad[j];var g=[];var h=[];document.write('<a class="abjad-alfabet" name='+i+">"+i+"</a>");document.write('<ul class="list-post">');for(var d=0;d<e.length;d++){g.push(e[d].title);g.sort()}for(var d=0;d<e.length;d++){var k=g[d];var f="";for(var b=0;b<e.length;b++){if(e[b].title==k){f=e[b].linkpost}}document.write('
<li><a href="'+f+'">'+k+"</a></li>
")}document.write("</ul>
")}};this.run=function(){this.grab();this.filter();this.buildingscripts()}}function show_anilist(b){var a=new Index_anilist(b);a.run()};document.write("<div id='abjad-filted'>
\r\n<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>
\r\n</div>
");
document.write('<script src="/feeds/posts/default/-/LABELKAMU?orderby=published&alt=json-in-script&callback=show_anilist&max-results=99999"><\/script>');
/*]]>*/
</script>

Ganti yang bertanda merah dengan nama label kamu.

Contoh : disetiap postingan kamu beri label, misal Film. maka otomatis postingan yang kamu beri label Film akan muncul dihalaman yang sudah kamu buat tadi

Silahkan tekan tombol berikut untuk melihat Demo nya

Result

Sekian Cara Membuat List Auto Index Filter Abjad dengan Satu Label, semoga bermanfaat dan terima kasih telah berkunjung.

Apabila ada pertanyaan silahkan berkomentar dibawah ini.