Adding an anime list sitemap to Blogger is one of the most effective ways to improve both user experience and SEO. In the anime blogging niche, where you often have hundreds of episodes, reviews, or movie entries, a standard "Archives" widget just doesn't cut it.

In this guide, you’ll learn how to recreate a Crunchyroll-inspired Anime List Sitemap for Blogger, giving your site a more modern, organized, and user-friendly interface.

This sitemap includes a sticky alphabetical navigation bar, a smooth scrolling “Scrollspy” effect, and a clean card-based layout. It’s designed to adapt seamlessly to both dark and light modes, ensuring a consistent experience across all devices.

The Design Concept: Why a “Crunchyroll-Inspired” Layout?

Crunchyroll’s interface is iconic for its use of vibrant orange accents, high-contrast typography, and an intuitive alphabetical filter. By bringing this to Blogger, you solve three major problems:

1. Clutter Reduction: Instead of displaying a long, unorganized list of posts, content is grouped into an easy-to-browse A–Z directory.
2. Improved Navigation: A sticky header allows users to jump between sections instantly without scrolling back to the top.
3. Better Visual Experience: Thumbnails combined with short summaries create a layout similar to streaming platforms, making browsing more engaging.

Preparing Your Blogger Content

Before applying the script, it’s important to organize your content properly. The sitemap relies on Blogger’s JSON feed, so your posts must follow a consistent structure.

• Labels: The script pulls posts from a specific label (default is “Series”). Make sure all relevant posts use this label or you can change this later on.
• Post Content: The script automatically extracts the first image for the thumbnail and generates a short description from your content.

Step 1 — Create a New Page

You’ll need a dedicated static page to display the anime list.

1. Go to your Blogger Dashboard.
2. Navigate to Pages > New Page.
3. Name it “Anime List” or “Sitemap.”
4. Switch the editor to HTML View.
5. Clear any existing content and prepare to insert the script.

Step 2 — Add the Sitemap Script

The script uses system-based color detection, meaning it will automatically adjust to your theme’s dark or light mode. You can still customize the colors manually through CSS variables if needed.

<div id="a-top"></div>
<div id="anime-list-display"></div>

<style>
:root{--cr-bg: #ffffff; --cr-text: #000000; --cr-subtext: #666666; --cr-border: #e0e0e0; --cr-orange: #f47521;}
[data-theme="dark"]{--cr-bg: #141519; --cr-text: #ffffff; --cr-subtext: #a0a0a0; --cr-border: #23252b;}
body,.content-outer,.main-inner,.column-center-outer{overflow:visible !important;}
#a-top{position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; background: var(--cr-bg); border-bottom: 1px solid var(--cr-border); padding: 10px 0; transition: box-shadow 0.3s ease;}
#a-top.sticky{box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}
.nav-container{display: flex; align-items: center; max-width: 1200px; margin: 0 auto; position: relative;}
#abjad-filted{display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 5px 40px; margin: 0; width: 100%;}
#abjad-filted a{flex: 0 0 auto; color: var(--cr-text); text-decoration: none; font-weight: 700; padding: 10px 15px; font-size: 1rem; display: inline-block;}
.nav-arrow{display: none; position: absolute; top: 50%; transform: translateY(-50%); background: var(--cr-bg); border: none; color: var(--cr-orange); font-size: 20px; cursor: pointer; z-index: 1001; width: 40px; height: 100%; align-items: center; justify-content: center; box-shadow: 0 0 10px 10px var(--cr-bg);}
#prev-btn{left: 0;}
#next-btn{right: 0;}
.nav-container{display: flex; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; position: relative; overflow: hidden; height: 50px;}
#abjad-filted a.active{color: var(--cr-orange); border-bottom: 2px solid var(--cr-orange); transition: all 0.3s ease;}
.abjad-section{margin: 40px auto; max-width: 1200px; padding: 0 15px; scroll-margin-top: 80px;}
.abjad-header{font-size: 2rem; font-weight: 900; color: var(--cr-text); border-bottom: 2px solid var(--cr-orange); margin-bottom: 20px;}
.anime-item{display: flex; gap: 20px; padding: 10px 0; text-decoration: none;}
.anime-item:hover{background: rgba(244, 117, 33, 0.05);}
.anime-thumb{flex:0 0 100px;width:100px !important;height:150px;border-radius:4px;object-fit:cover;object-position:center;background-color:var(--cr-border);}
.anime-details{flex: 1; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;}
.anime-title-text{color: var(--cr-text); font-size: 1.2rem; font-weight: 700; margin: 10px 0;}
.anime-summary{color: var(--cr-subtext); font-size: 0.9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
@media (max-width: 600px){.anime-summary{display: none;}
.anime-thumb{flex: 0 0 80px;}
.anime-title-text{font-size: 1rem;}
}
</style>

<script type="text/javascript">/*<![CDATA[*/
const config = {
    blogURL: window.location.protocol + "//" + window.location.hostname,
    showSynopsis: "Yes",
    synopsisLength: 280
};

(function(_0x3bdd29,_0x2e0cbe){const _0x42d261=_0x3e01,_0xc042a2=_0x3bdd29();while(!![]){try{const _0x50f098=parseInt(_0x42d261(0x1b1))/(0x705+-0xe0a+0x706)+parseInt(_0x42d261(0xf2))/(0x257f+0x20a4+-0xd*0x565)*(-parseInt(_0x42d261(0x135))/(-0x1e05+-0x1844*0x1+0x364c))+-parseInt(_0x42d261(0x111))/(0xd0f*-0x2+-0x89e+0x22c0)+parseInt(_0x42d261(0x18c))/(0x10f7+0x1bdb+-0xeef*0x3)+parseInt(_0x42d261(0x179))/(-0x1*-0x248c+-0x14cf+0x9*-0x1bf)+-parseInt(_0x42d261(0x131))/(0xe0+-0xdb1*-0x1+-0xe8a)*(-parseInt(_0x42d261(0x152))/(0xece+-0x6*0x61f+0xafa*0x2))+parseInt(_0x42d261(0x194))/(0xa8e+0x10bb*-0x1+0x636)*(-parseInt(_0x42d261(0xde))/(0xb5*-0x7+-0x97b+0xe78));if(_0x50f098===_0x2e0cbe)break;else _0xc042a2['push'](_0xc042a2['shift']());}catch(_0x39628f){_0xc042a2['push'](_0xc042a2['shift']());}}}(_0x446a,0x4766e*-0x2+-0x22de1+0x1258a5));function _0x446a(){const _0x35cf21=['href','replace','AjCB0C8AAA','83300pZhxQi','HJAyp','ass=\x22nav-a','scroll','\x20\x20\x20\x20\x20','addEventLi','YzmDF','\x20<a\x20href=\x22','bmsaz','a-top','SAshM','xGKLL','HYEVS','onclick','showSynops','ss=\x22anime-','onclick=\x22s','dMMUl','\x22\x20loading=','getAttribu','num','content','anime-list','\x22\x20class=\x22a','strqw','length','summary','Ioajr','rel','=\x22nav-cont','abjad','523092hhnjan','forEach','ction\x22\x20id=','txDUr','jad-filted','\x22lazy\x22>\x0a\x20\x20','/s400','nime-item\x22','\x20\x20\x20\x20\x20</div','iv\x20class=\x22','C0lEQVR42m','4,iVBORw0K','NkYAAAAAYA','-10%\x200px\x20-','charAt','div\x20id=\x22ab','scrollTo','fVZmb','smbVJ','\x22section-','hYCzt','-btn\x22\x20oncl','AJuYX','e-text\x22>','ted\x20a','wGhYf','zliaG','test','Xinxf','remove','anime-titl','bnail','4696853vRpnmr','\x20\x20</a>','utton>','left','36FNZWZt','=\x22#','kWOgE','tvkNf','getElement','\x20\x20<div\x20cla','next-btn','ted\x20a[href','\x20src=\x22','tHdgg','details\x22>\x0a','target','nearest','media$thum','scrollBy','are','HrQrS','querySelec','/png;base6','\x22nav-arrow','<a\x20href=\x22#','NkSqi','\x20\x20\x20\x20\x20\x20\x20\x20<d','Yes','jRMLb','</div>','ault','ime-thumb\x22','KXZIh','8xrAYGR','\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20','80%\x200px','scrollLeft','torAll','ting','find','display','title','observe','prev-btn\x22\x20','jXhKJ','clientWidt','smooth','active','AASUVORK5C','keys','QyvwC','center','#abjad-fil','\x20\x20\x20\x20\x20\x20<img','=\x22anime-su','substring','ktMpr','ss=\x22abjad-','data:image','\x22><div\x20cla','ainer\x22>','flex','UfiaL','pageYOffse','BfeTe','ById','SMlad','classList','entry','aCqFJ','</a>','isIntersec','1840854qKMyvD','AAABCAQAAA','thumb','HJjjx','style','<button\x20cl','MCVCJ','\x27left\x27)\x22>❮','rrow\x22\x20id=\x22','VxHfc','oFAWn','add','offsetHeig','OGLCa','link','uifSu','none','section-','sticky','4292185dDZfYq','</button><','...','</div>\x0a\x20\x20\x20','scrollWidt','preventDef','OrNxo','\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20','50769KSotUy','localeComp','toUpperCas','DHWjP','mOeWA','tor','trim','Qehho','>\x0a\x20\x20\x20\x20\x20\x20\x20\x20','.abjad-sec','Gpopc','xIjeq','url','header\x22>','feed','croll(\x27rig','\x22\x20id=\x22next','init','alternate','IieNR','bMKzI','View','C1HAwCAAAA','offsetTop','=\x22abjad-se','ideScroll(','qPMFM','mmary\x22>','push','346379kKZHUD','Wyoly','</div><but','<div\x20class','OtGPv','scrollInto','synopsisLe','XlTjF','ick=\x22sideS','ngth','\x20class=\x22an','tion','innerHTML','GgoAAAANSU','prev-btn','-display','saUcx','1910aSMDAy','YPESd','sort','bVIPv','DxlUo','tZLYF','ht\x27)\x22>❯</b','SgohY','YII=','render','toggle','stener','abjad-filt','mrEBg','iZNGk','hEUgAAAAEA','ton\x20class='];_0x446a=function(){return _0x35cf21;};return _0x446a();}function _0x3e01(_0xbdbf3b,_0x1313d4){_0xbdbf3b=_0xbdbf3b-(-0x19a7+0x1*0x1b6f+0x7b*-0x2);const _0x479cb3=_0x446a();let _0x38717f=_0x479cb3[_0xbdbf3b];return _0x38717f;}function AnimeListManager(_0x3aba5d){const _0x160e9b=_0x3e01,_0x2570a8={'KXZIh':_0x160e9b(0x117),'SMlad':_0x160e9b(0x16b)+_0x160e9b(0x147)+_0x160e9b(0x11c)+_0x160e9b(0xda)+_0x160e9b(0xed)+_0x160e9b(0x17a)+_0x160e9b(0x1aa)+_0x160e9b(0x11b)+_0x160e9b(0x11d)+_0x160e9b(0xf1)+_0x160e9b(0x161)+_0x160e9b(0xe6),'zliaG':function(_0x1657a9,_0xe2f105){return _0x1657a9>_0xe2f105;},'AJuYX':function(_0x257c58,_0x52c3fb){return _0x257c58+_0x52c3fb;},'hYCzt':_0x160e9b(0x18e),'bVIPv':function(_0x3c4dcd,_0x3a7229){return _0x3c4dcd===_0x3a7229;},'MCVCJ':_0x160e9b(0x14c),'Qehho':_0x160e9b(0x106),'OGLCa':_0x160e9b(0xfb),'YzmDF':_0x160e9b(0x108)+_0x160e9b(0xdc),'fVZmb':function(_0x39f176){return _0x39f176();}};this[_0x160e9b(0x110)]={},this[_0x160e9b(0x1a5)]=function(){const _0x1862d0=_0x160e9b,_0x52e5a9=_0x3aba5d[_0x1862d0(0x1a2)][_0x1862d0(0x175)]||[];_0x52e5a9[_0x1862d0(0x112)](_0x5b18bf=>{const _0x197bbe=_0x1862d0,_0x55ce7c=_0x5b18bf[_0x197bbe(0x15a)]['$t'],_0x2dd06b=_0x5b18bf[_0x197bbe(0x187)][_0x197bbe(0x158)](_0x26cbdc=>_0x26cbdc[_0x197bbe(0x10e)]===_0x197bbe(0x1a6))[_0x197bbe(0xef)],_0x502d62=_0x5b18bf[_0x197bbe(0x142)+_0x197bbe(0x130)]?_0x5b18bf[_0x197bbe(0x142)+_0x197bbe(0x130)][_0x197bbe(0x1a0)][_0x197bbe(0xf0)](/\/s72\-c/,_0x2570a8[_0x197bbe(0x151)]):_0x2570a8[_0x197bbe(0x173)];let _0x2fbc93=_0x5b18bf[_0x197bbe(0x10c)]?_0x5b18bf[_0x197bbe(0x10c)]['$t']:_0x5b18bf[_0x197bbe(0x107)]?_0x5b18bf[_0x197bbe(0x107)]['$t']:'',_0x57db78=_0x2fbc93[_0x197bbe(0xf0)](/<(?:.|\n)*?>/gm,'')[_0x197bbe(0x19a)]();if(_0x2570a8[_0x197bbe(0x12b)](_0x57db78[_0x197bbe(0x10b)],config[_0x197bbe(0xd3)+_0x197bbe(0xd6)]))_0x57db78=_0x2570a8[_0x197bbe(0x127)](_0x57db78[_0x197bbe(0x168)](0xd1*0xf+0x1568+-0x21a7,config[_0x197bbe(0xd3)+_0x197bbe(0xd6)]),_0x2570a8[_0x197bbe(0x125)]);let _0x406c20=_0x55ce7c[_0x197bbe(0x19a)]()[_0x197bbe(0x11f)](-0x1140+0x50d*0x3+0x219)[_0x197bbe(0x196)+'e']();if(!/^[A-Z]$/[_0x197bbe(0x12c)](_0x406c20))_0x406c20='#';if(!this[_0x197bbe(0x110)][_0x406c20])this[_0x197bbe(0x110)][_0x406c20]=[];this[_0x197bbe(0x110)][_0x406c20][_0x197bbe(0x1b0)]({'title':_0x55ce7c,'thumb':_0x502d62,'link':_0x2dd06b,'summary':_0x57db78});}),this[_0x1862d0(0xe7)]();},this[_0x160e9b(0xe7)]=function(){const _0x131517=_0x160e9b,_0x50bf41=Object[_0x131517(0x162)](this[_0x131517(0x110)])[_0x131517(0xe0)]();let _0x49c3c7=_0x131517(0x17e)+_0x131517(0xf4)+_0x131517(0x181)+_0x131517(0x15c)+_0x131517(0x102)+_0x131517(0x1ad)+_0x131517(0x180)+_0x131517(0x18d)+_0x131517(0x120)+_0x131517(0x115)+'\x22>',_0x27958b='';_0x50bf41[_0x131517(0x112)](_0x59adbc=>{const _0x3e98f5=_0x131517,_0x3b4283={'tHdgg':function(_0x397a28,_0x5a2599){const _0x2bca94=_0x3e01;return _0x2570a8[_0x2bca94(0xe1)](_0x397a28,_0x5a2599);},'tvkNf':_0x2570a8[_0x3e98f5(0x17f)]},_0x2a0bee=_0x2570a8[_0x3e98f5(0xe1)](_0x59adbc,'#')?_0x2570a8[_0x3e98f5(0x19b)]:_0x59adbc;_0x49c3c7+=_0x3e98f5(0x149)+_0x3e98f5(0x18a)+_0x2a0bee+'\x22>'+_0x59adbc+_0x3e98f5(0x177),_0x27958b+=_0x3e98f5(0x1b4)+_0x3e98f5(0x1ac)+_0x3e98f5(0x113)+_0x3e98f5(0x124)+_0x2a0bee+(_0x3e98f5(0x16c)+_0x3e98f5(0x16a)+_0x3e98f5(0x1a1))+_0x59adbc+_0x3e98f5(0x14e),this[_0x3e98f5(0x110)][_0x59adbc][_0x3e98f5(0xe0)]((_0x1a87d0,_0x5d62de)=>_0x1a87d0[_0x3e98f5(0x15a)][_0x3e98f5(0x195)+_0x3e98f5(0x144)](_0x5d62de[_0x3e98f5(0x15a)]))[_0x3e98f5(0x112)](_0x20aebb=>{const _0x18db44=_0x3e98f5;_0x27958b+=_0x18db44(0x153)+_0x18db44(0x193)+_0x18db44(0xf9)+_0x20aebb[_0x18db44(0x187)]+(_0x18db44(0x109)+_0x18db44(0x118)+_0x18db44(0x19c)+_0x18db44(0x193)+_0x18db44(0x166)+_0x18db44(0xd7)+_0x18db44(0x150)+_0x18db44(0x13d))+_0x20aebb[_0x18db44(0x17b)]+(_0x18db44(0x104)+_0x18db44(0x116)+_0x18db44(0x193)+_0x18db44(0x193)+_0x18db44(0x13a)+_0x18db44(0x101)+_0x18db44(0x13f)+_0x18db44(0x193)+_0x18db44(0x193)+_0x18db44(0x14b)+_0x18db44(0x11a)+_0x18db44(0x12f)+_0x18db44(0x128))+_0x20aebb[_0x18db44(0x15a)]+(_0x18db44(0x18f)+_0x18db44(0x193)+_0x18db44(0x193)+_0x18db44(0xf6))+(_0x3b4283[_0x18db44(0x13e)](config[_0x18db44(0x100)+'is'],_0x3b4283[_0x18db44(0x138)])?_0x18db44(0x1b4)+_0x18db44(0x167)+_0x18db44(0x1af)+_0x20aebb[_0x18db44(0x10c)]+_0x18db44(0x14e):'')+(_0x18db44(0x153)+_0x18db44(0x193)+_0x18db44(0x119)+_0x18db44(0x19c)+_0x18db44(0x193)+_0x18db44(0x132));}),_0x27958b+=_0x3e98f5(0x14e);}),_0x49c3c7+=_0x131517(0x1b3)+_0x131517(0xee)+_0x131517(0x148)+_0x131517(0x1a4)+_0x131517(0x126)+_0x131517(0xd5)+_0x131517(0x1a3)+_0x131517(0xe4)+_0x131517(0x133),document[_0x131517(0x139)+_0x131517(0x172)](_0x2570a8[_0x131517(0x186)])[_0x131517(0xd9)]=_0x131517(0x1b4)+_0x131517(0x10f)+_0x131517(0x16d)+_0x49c3c7+_0x131517(0x14e),document[_0x131517(0x139)+_0x131517(0x172)](_0x2570a8[_0x131517(0xf8)])[_0x131517(0xd9)]=_0x27958b,_0x2570a8[_0x131517(0x122)](setupScrollFeatures);};}function initScrollspy(){const _0x4d5bd4=_0x3e01,_0x2bc428={'SAshM':_0x4d5bd4(0x160),'Gpopc':_0x4d5bd4(0x15f),'bmsaz':_0x4d5bd4(0x164),'Ioajr':_0x4d5bd4(0x141),'txDUr':_0x4d5bd4(0x165)+_0x4d5bd4(0x129),'smbVJ':_0x4d5bd4(0x19d)+_0x4d5bd4(0xd8),'SgohY':_0x4d5bd4(0x11e)+_0x4d5bd4(0x154)},_0x181391=document[_0x4d5bd4(0x146)+_0x4d5bd4(0x156)](_0x2bc428[_0x4d5bd4(0x114)]),_0x43531c=document[_0x4d5bd4(0x146)+_0x4d5bd4(0x156)](_0x2bc428[_0x4d5bd4(0x123)]),_0x30c99d={'root':null,'rootMargin':_0x2bc428[_0x4d5bd4(0xe5)],'threshold':0x0},_0x46cabd=new IntersectionObserver(_0x576521=>{const _0x29c0ff=_0x4d5bd4,_0x18ecb9={'uifSu':_0x2bc428[_0x29c0ff(0xfc)],'wGhYf':_0x2bc428[_0x29c0ff(0x19e)],'mOeWA':_0x2bc428[_0x29c0ff(0xfa)],'oFAWn':_0x2bc428[_0x29c0ff(0x10d)]};_0x576521[_0x29c0ff(0x112)](_0x61036f=>{const _0x4859b3=_0x29c0ff;if(_0x61036f[_0x4859b3(0x178)+_0x4859b3(0x157)]){const _0x38041d=_0x61036f[_0x4859b3(0x140)][_0x4859b3(0x105)+'te']('id');_0x181391[_0x4859b3(0x112)](_0xc172a9=>_0xc172a9[_0x4859b3(0x174)][_0x4859b3(0x12e)](_0x4859b3(0x160)));const _0xc71406=document[_0x4859b3(0x146)+_0x4859b3(0x199)](_0x4859b3(0x165)+_0x4859b3(0x13c)+_0x4859b3(0x136)+_0x38041d+'\x22]');_0xc71406&&(_0xc71406[_0x4859b3(0x174)][_0x4859b3(0x184)](_0x18ecb9[_0x4859b3(0x188)]),_0xc71406[_0x4859b3(0xd2)+_0x4859b3(0x1a9)]({'behavior':_0x18ecb9[_0x4859b3(0x12a)],'inline':_0x18ecb9[_0x4859b3(0x198)],'block':_0x18ecb9[_0x4859b3(0x183)]}));}});},_0x30c99d);_0x43531c[_0x4d5bd4(0x112)](_0x543f96=>_0x46cabd[_0x4d5bd4(0x15b)](_0x543f96));}function setupScrollFeatures(){const _0x1c6f16=_0x3e01,_0x3443b3={'jRMLb':_0x1c6f16(0x18b),'jXhKJ':function(_0xb86367,_0x2cedc5){return _0xb86367>_0x2cedc5;},'IieNR':_0x1c6f16(0xef),'UfiaL':function(_0x5333f3,_0x14fee8){return _0x5333f3-_0x14fee8;},'iZNGk':_0x1c6f16(0x15f),'OrNxo':_0x1c6f16(0x160),'xGKLL':_0x1c6f16(0x164),'xIjeq':_0x1c6f16(0x141),'DHWjP':_0x1c6f16(0xfb),'strqw':_0x1c6f16(0x165)+_0x1c6f16(0x129),'tZLYF':_0x1c6f16(0x19d)+_0x1c6f16(0xd8),'HrQrS':_0x1c6f16(0xf5),'VxHfc':_0x1c6f16(0x11e)+_0x1c6f16(0x154),'ktMpr':function(_0x1300d5){return _0x1300d5();}},_0x1638f5=document[_0x1c6f16(0x139)+_0x1c6f16(0x172)](_0x3443b3[_0x1c6f16(0x197)]),_0x1d21b9=document[_0x1c6f16(0x146)+_0x1c6f16(0x156)](_0x3443b3[_0x1c6f16(0x10a)]),_0x1215a8=document[_0x1c6f16(0x146)+_0x1c6f16(0x156)](_0x3443b3[_0x1c6f16(0xe3)]),_0x36f506=_0x1638f5[_0x1c6f16(0x1ab)];window[_0x1c6f16(0xf7)+_0x1c6f16(0xe9)](_0x3443b3[_0x1c6f16(0x145)],()=>{const _0xfc02ea=_0x1c6f16;_0x1638f5[_0xfc02ea(0x174)][_0xfc02ea(0xe8)](_0x3443b3[_0xfc02ea(0x14d)],_0x3443b3[_0xfc02ea(0x15d)](window[_0xfc02ea(0x170)+'t'],_0x36f506));}),_0x1d21b9[_0x1c6f16(0x112)](_0x2cf449=>{const _0x3ddb2b=_0x1c6f16;_0x2cf449[_0x3ddb2b(0xff)]=function(_0x201736){const _0x2b5b70=_0x3ddb2b;_0x201736[_0x2b5b70(0x191)+_0x2b5b70(0x14f)]();const _0x24ad71=this[_0x2b5b70(0x105)+'te'](_0x3443b3[_0x2b5b70(0x1a7)]),_0x4b950c=document[_0x2b5b70(0x146)+_0x2b5b70(0x199)](_0x24ad71);if(_0x4b950c){const _0x180214=_0x1638f5[_0x2b5b70(0x185)+'ht'];window[_0x2b5b70(0x121)]({'top':_0x3443b3[_0x2b5b70(0x16f)](_0x4b950c[_0x2b5b70(0x1ab)],_0x180214),'behavior':_0x3443b3[_0x2b5b70(0xec)]});}};});const _0x3f6f3f=new IntersectionObserver(_0x4ae87d=>{const _0x4f18d1=_0x1c6f16,_0x58eaae={'Wyoly':_0x3443b3[_0x4f18d1(0x192)],'qPMFM':_0x3443b3[_0x4f18d1(0xec)],'OtGPv':_0x3443b3[_0x4f18d1(0xfd)],'QyvwC':_0x3443b3[_0x4f18d1(0x19f)]};_0x4ae87d[_0x4f18d1(0x112)](_0x33e8aa=>{const _0x35aaf8=_0x4f18d1;if(_0x33e8aa[_0x35aaf8(0x178)+_0x35aaf8(0x157)]){_0x1d21b9[_0x35aaf8(0x112)](_0xf77c4d=>_0xf77c4d[_0x35aaf8(0x174)][_0x35aaf8(0x12e)](_0x35aaf8(0x160)));const _0xd3594d=document[_0x35aaf8(0x146)+_0x35aaf8(0x199)](_0x35aaf8(0x165)+_0x35aaf8(0x13c)+_0x35aaf8(0x136)+_0x33e8aa[_0x35aaf8(0x140)]['id']+'\x22]');_0xd3594d&&(_0xd3594d[_0x35aaf8(0x174)][_0x35aaf8(0x184)](_0x58eaae[_0x35aaf8(0x1b2)]),_0xd3594d[_0x35aaf8(0xd2)+_0x35aaf8(0x1a9)]({'behavior':_0x58eaae[_0x35aaf8(0x1ae)],'inline':_0x58eaae[_0x35aaf8(0x1b5)],'block':_0x58eaae[_0x35aaf8(0x163)]}));}});},{'rootMargin':_0x3443b3[_0x1c6f16(0x182)]});_0x1215a8[_0x1c6f16(0x112)](_0x451543=>_0x3f6f3f[_0x1c6f16(0x15b)](_0x451543)),_0x3443b3[_0x1c6f16(0x169)](checkArrowVisibility);}function checkArrowVisibility(){const _0x2d1db9=_0x3e01,_0x2a1102={'bMKzI':_0x2d1db9(0xea)+'ed','DxlUo':function(_0x5ed43e,_0xe87ca5){return _0x5ed43e>_0xe87ca5;},'saUcx':_0x2d1db9(0xdb),'BfeTe':function(_0x4b98b2,_0x4fdd7a){return _0x4b98b2>_0x4fdd7a;},'Xinxf':_0x2d1db9(0x16e),'HJAyp':_0x2d1db9(0x189),'mrEBg':_0x2d1db9(0x13b),'YPESd':function(_0x433288,_0x97f902){return _0x433288<_0x97f902;},'HYEVS':function(_0x29fe31,_0x33bc91){return _0x29fe31+_0x33bc91;},'XlTjF':function(_0x37c962,_0x245c80){return _0x37c962-_0x245c80;}},_0x5947e4=document[_0x2d1db9(0x139)+_0x2d1db9(0x172)](_0x2a1102[_0x2d1db9(0x1a8)]);if(!_0x5947e4)return;const _0x214a9e=_0x2a1102[_0x2d1db9(0xe2)](_0x5947e4[_0x2d1db9(0x190)+'h'],_0x5947e4[_0x2d1db9(0x15e)+'h']);document[_0x2d1db9(0x139)+_0x2d1db9(0x172)](_0x2a1102[_0x2d1db9(0xdd)])[_0x2d1db9(0x17d)][_0x2d1db9(0x159)]=_0x214a9e&&_0x2a1102[_0x2d1db9(0x171)](_0x5947e4[_0x2d1db9(0x155)],0x219*0x1+-0x6*0x55f+0x1e26)?_0x2a1102[_0x2d1db9(0x12d)]:_0x2a1102[_0x2d1db9(0xf3)],document[_0x2d1db9(0x139)+_0x2d1db9(0x172)](_0x2a1102[_0x2d1db9(0xeb)])[_0x2d1db9(0x17d)][_0x2d1db9(0x159)]=_0x214a9e&&_0x2a1102[_0x2d1db9(0xdf)](_0x2a1102[_0x2d1db9(0xfe)](_0x5947e4[_0x2d1db9(0x155)],_0x5947e4[_0x2d1db9(0x15e)+'h']),_0x2a1102[_0x2d1db9(0xd4)](_0x5947e4[_0x2d1db9(0x190)+'h'],0x23b9+0x22f0+-0x5e3*0xc))?_0x2a1102[_0x2d1db9(0x12d)]:_0x2a1102[_0x2d1db9(0xf3)];}function sideScroll(_0x1ff5bb){const _0x3326f0=_0x3e01,_0x28ae9c={'HJjjx':_0x3326f0(0xea)+'ed','aCqFJ':function(_0x2e7ae0,_0x5009fc){return _0x2e7ae0===_0x5009fc;},'NkSqi':_0x3326f0(0x134),'dMMUl':_0x3326f0(0x15f),'kWOgE':function(_0x372b1b,_0x48bef4,_0x1cd622){return _0x372b1b(_0x48bef4,_0x1cd622);}},_0x3e367d=document[_0x3326f0(0x139)+_0x3326f0(0x172)](_0x28ae9c[_0x3326f0(0x17c)]);_0x3e367d[_0x3326f0(0x143)]({'left':_0x28ae9c[_0x3326f0(0x176)](_0x1ff5bb,_0x28ae9c[_0x3326f0(0x14a)])?-(0x60+0x1067+-0xfff*0x1):-0x15ab+0x558+0x111b*0x1,'behavior':_0x28ae9c[_0x3326f0(0x103)]}),_0x28ae9c[_0x3326f0(0x137)](setTimeout,checkArrowVisibility,0x9*-0x311+-0x21ac+-0x1*-0x3e71);}

document.addEventListener("DOMContentLoaded", () => {
    window.addEventListener('resize', checkArrowVisibility);
    document.getElementById('abjad-filted')?.addEventListener('scroll', checkArrowVisibility);
    
    let s = document.createElement('script');
    s.src = `${config.blogURL}/feeds/posts/default?alt=json-in-script&max-results=150&callback=show_animelist`;
    document.body.appendChild(s);
});

window.show_animelist = function(data) { new AnimeListManager(data).init(); };
/*]]>*/</script>

s.src = `${config.blogURL}/feeds/posts/default/-/Series?alt=json-in-script&max-results=150&callback=show_animelist`; 

1. Understanding the Script

The functionality of this sitemap is powered by a JavaScript manager that processes your blog’s feed and dynamically generates the layout.

Configuration Settings

At the top of the script, you’ll find a config object. This is where you can customize how the sitemap behaves.

• blogURL: Set this to your blog’s URL.
• synopsisLength: Controls how many characters are shown in each anime description.
• showSynopsis: Determines whether the description is displayed or hidden.

For example:

showSynopsis: "Yes",
synopsisLength: 280

You can edit these values directly in the script:

• showSynopsis: Set this to "Yes" if you want descriptions to appear, or change it to "No" if you prefer a cleaner layout without text.
• synopsisLength: Adjust the number (e.g., 150, 200, 300) to control how long each summary appears. Lower values create a more compact design, while higher values show more details.

This gives you full control over how much information is displayed in each anime card.

Alphabetical Organization

The script groups posts based on the first letter of their titles. Each entry is sorted into sections (A–Z). Titles that begin with numbers or special characters are automatically placed under the “#” category.

Smooth Navigation (Scrollspy)

Instead of relying on traditional scroll tracking, the script uses the Intersection Observer API. This allows it to detect which section is currently visible and update the navigation bar accordingly.

1. The active letter is highlighted.
2. The navigation bar automatically centers the selected letter.

2. Customization Tips

Changing Colors

If you want a different theme color, simply edit the CSS variable --cr-orange.

• Purple (Funimation style): #5b2a82
• Red (Netflix style): #e50914

Handling Large Content

The current script is set to max-results=150 by default. If your site has more entries, you can increase this number. Keep in mind that Blogger feeds typically have a maximum limit of around 500 posts per request.

For very large blogs, you may need to implement additional loading methods to fetch more data.

Mobile Optimization

On mobile devices, the alphabetical menu becomes a horizontally scrollable bar. The script includes hidden navigation controls that allow users to scroll left or right, making the interface more intuitive.

Step 3 — Publish the Page

1. Click Publish or Update.
2. Open the page to confirm that your posts are loading correctly.

Troubleshooting

Sitemap not loading?

• Ensure your blog is Public. Private blogs block JSON feeds.
• Check that the callback parameter in the script is intact.

Layout issues?

• If the content overlaps with your sidebar, switch the page layout to full width. Many Blogger themes include this option in page settings.

By implementing this Crunchyroll-inspired sitemap, you are providing your visitors with a high-end, organized, and responsive way to discover your content. It makes navigation easier, improves engagement, and gives your site a more professional feel.

After publishing, don’t forget to add the sitemap link to your main menu or footer so visitors can easily access it.

This is a reminder that if you use our code for a tutorial on your website, please give proper credit to us. Avoid simply copying and pasting the content. We have thoroughly tested the code to ensure it works correctly and is compatible for use on your site.