Sitemap ini berfungsi untuk pengelompokkan list anime/manga berdasarkan label.

Demo

Menurut pembuatnya sudah dapat mengindex post 150+.

Namun fitur paling penting menurutku adalah automatic index abjad dan anime list. Tidak perlu lagi membuat list A B C dst... secara manual

Sriptnya tidak di encript untuk memudahkan costumisasi. Salut pada pembuatny sudah mau sharing sama kita.

Cara Memasang Auto Index Anime List

Buka Blogger > Halaman > + HALAMAN BARU > HTML View
Copy code berikut

<style>
#mapAbjd .nav ol::after{display:block;clear:both;content:""}#mapAbjd .nav ol{margin:0 0 15px;padding:0}#mapAbjd .nav ol li{background-color:#262626;color:#d5d5d5;padding:7px 0;cursor:pointer;margin:2px;text-align:center;text-transform:uppercase;width:7.1428571429%;float:left;padding:3px 0;border-radius:.25rem}#mapAbjd .isi ol{margin:0 0 20px;padding:0;overflow:hidden}.v-abjad{display:grid;grid-template-columns:minmax(1rem,5rem) 1fr}#mapAbjd .isi ol li:nth-child(2n-1){background:#181818}#mapAbjd .isi ol li{display: flex;color:#666;list-style-type:none;margin:0;padding:10px;line-height:1.5em}.abjad span:first-child{display:grid;align-items:center;justify-content:center;height:100%;padding-right:20px}#mapAbjd .isi ol li:hover{background:#212121}#mapAbjd .nav ol li:hover{background:#363636}#mapAbjd{font-size:14px;font-weight:400}#mapAbjd .judul{font-size:150%;background-color:firebrick;color:#fff;font-weight:600;text-align:center;margin-bottom:20px;padding:15px}#mapAbjd a{display:block;font-size:1.01rem;color:#666;text-decoration:none;transition:all .3s ease;white-space:nowrap;overflow:hidden}#mapAbjd a:hover{color:#ababab}#mapAbjd .isi .abjad{transition: .4s;background-color:#262626;color:#fff;padding:10px 15px;font-size:110%;font-weight:600;text-transform:uppercase;position:relative}#mapAbjd .isi .v-abjad:hover .abjad{background:firebrick}#mapAbjd .isi .abjad:nth-of-type(even){background-color:#b53428}#mapAbjd .isi .abjad #top:before{content:'';width:12px;bottom:0;position:absolute;right:0;top:0;padding:10px;cursor:pointer;background:rgba(0,0,0,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat}#mapAbjd ol,#mapAbjd ol li{list-style-type:none}#mapAbjd .nav ol li:last-child{margin-right:0}#mapAbjd .isi ol li:before{content:'';width:20px;height:20px;min-width:20px;min-height:20px;margin:0;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%234b4f56'/%3E%3C/svg%3E") center no-repeat;transition:.4s all ease;-webkit-transition:.4s all ease;-moz-transition:.4s all ease;-ms-transition:.4s all ease;-o-transition:.4s all ease}#mapAbjd .isi ol li:hover:before{transform:rotate(-36deg);-webkit-transform:rotate(-36deg);-moz-transform:rotate(-36deg);-ms-transform:rotate(-36deg);-o-transform:rotate(-36deg)}@media screen and (max-width:680px){#mapAbjd .isi ol li{width:100%;float:none}}@media screen and (max-width:480px){#mapAbjd{font-size:13px}#mapAbjd .judul{padding:10px}#mapAbjd .isi .abjad{padding:7px 15px}}@media screen and (max-width:360px){#mapAbjd{font-size:12px}#mapAbjd .judul{padding:10px}#mapAbjd .isi .abjad{padding:7px 12px}#mapAbjd .isi ol li{padding:7px 12px}}
</style>

<div id="mapAbjd">Loading....
<script>/*<![CDATA[*/
const mapAbjd={compile:function(){for(var t in this.settings.arr.forEach(t=>{const s=t.title.charAt(0).toLowerCase();-1==this.settings.abjad.indexOf(s)?(this.settings.abjad+=s,this.settings.grup[s]=[{title:t.title,url:t.url}]):this.settings.grup[s].push({title:t.title,url:t.url})}),this.settings.grup)this.settings.key.push(t);this.settings.key.sort().forEach(t=>{this.settings.print+=`<div class="v-abjad"><div class="abjad"><span data-value="${t}">${t}</span><span id="top" title="Back to Top"></span></div><ol>`;for(let s=0,i=this.settings.grup[t];s<i.length;s++){let t=i.sort((t,s)=>t.title>s.title?1:-1);this.settings.print+=`<li><a href="${t[s].url}" title="${t[s].title}">${t[s].title}</a></li>`}this.settings.print+="</ol></div>",this.settings.nav+=`<li>${t}</li>`}),this.settings.output.innerHTML=`<div class="judul">Total Post: ${this.settings.arr.length}</div><div class="nav"><ol>${this.settings.nav}</ol></div><div class="isi">${this.settings.print}</div>`,this.scrollRun()},create:function(t){if("entry"in t.feed){const s=t.feed.entry;s.forEach(t=>{const s=t.title.$t,i=t.link.find(t=>"alternate"==t.rel).href;this.settings.arr.push({title:s,url:i})}),s.length>=this.settings.max?(this.settings.start+=this.settings.max,this.run()):this.compile()}else 0!=this.settings.arr.length&&this.compile()},run:function(){if(this.settings.output=document.getElementById("mapAbjd"),!this.settings.output)return console.log("Output Noting");const t=void 0===this.settings.label?"":`/-/${this.settings.label}`,s=document.createElement("script");s.src=`/feeds/posts/summary${t}?alt=json&callback=mapAbjd.create&start-index=${this.settings.start}&max-results=${this.settings.max}`,document.body.appendChild(s)},settings:{abjad:"",arr:new Array,grup:new Array,key:new Array,max:150,nav:"",print:"",scroll:"instant",start:1},scrollRun:function(){this.settings.output.querySelectorAll(".nav ol li").forEach(t=>{t.onclick=(t=>{const s=t.currentTarget;this.settings.output.querySelector(`.isi .abjad [data-value="${s.innerHTML}"]`).parentNode.scrollIntoView({behavior:this.settings.scroll,block:"start"})})}),this.settings.output.querySelectorAll(".isi .abjad #top").forEach(t=>{t.onclick=(()=>{this.settings.output.querySelector(".nav").scrollIntoView({behavior:this.settings.scroll,block:"start"})})})}};mapAbjd.settings.label="Anime",mapAbjd.run();
/*]]>*/</script>
</div>

Paste setelah itu Publikasikan dan lihat hasilnya.

Untuk configurasi label :
mapAbjd.settings.label = 'Anime';
ganti Anime dengan label yang diinginkan

Peringatan: Jika membuat judul post, pastikan jangan sampai ada spasi di awal judul

Sumber Code: Source Code Sitemap Blogger Dengan Navigasi Abjad

Kak yang otomatis dong.

itu sudah otomatis kok

Hello

Min req template ini min

https://cryental.dev/services/anime/

Sudah tidak menerima request.
Antrian proyek sudah banyak.

semangat mimin tercinta <3

Semang2.
Proyekmu temamu sampai di mana?

dia puny proyek apa om? jadi kepo :v

gw nebak aja :3
sapa tau dia kasi bocoran :v

This look so good!

menunggu temanya rilis aja ah.. mudah mudahan freee. premium juga ga apalah asal terjangkau hha ha..

Sorry, temanya delay.
Proyek AnimeLa aku batalkan, di ganti dengan NineStream.
Struktur tema aku rekonstruksi ulang, ini diluar rencana awal.

Ada versi gratis dan premium, terserah mau milih yg mana. Bedanya hanya di kostumisasi. Yang premium bisa edit di tata letak.

Sabar ya, km gk bakal kecewa dgn hasilnya.

min ga bisa liat daftar project kyk dlu lagi ya?

Selama datang kembali.
Engk bisa,
selalu di intip orang, jadi beban buat gw.

hoo... gitu ya, ok deh min smngat , ditunggu templatenya :)
oh iy min template dame-dame msih bklan update lagi?

Belum ada rencana update dame-dame.
Ada proyek lain yg jadi prioritas.

uh madep ini tema yg di cari cari mirip mirip web movie Viu Wetv gitu cuma dua halaman halaman home page dan play movie.


semangat min
sehat selalu

Sekedar saran aja min, sepertinya perlu tambahan update script soalnya judul post yang tertampil pada sitemap jika di view via seluler gk responsive, malah terpotong. Itu aja sih

Solusi sementara:@media (max-width: 600px){.v-abjad {grid-template-columns: auto}}

I wonder if the animela project will be published... the theme is really nice, I definitely want to buy it

90% complete,
i wish i could release it faster.

Thank

min, misal pengen dipasang seluruh postingan dan gak cuman yang ber label anime, bisa gak min?

Tidak tahu cara konfigurasinya, artikelnya sudah tidak ada.
Mungkin dengan menghapus code di bawah ini bisa mengatasi masalahnya:mapAbjd.settings.label = 'Anime';

ada batas postnya nggk min? apa unlimited?