Sitemap Anime Blogger Abjad Auto Index

January 11, 2022

#1

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

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