Image
Dida
Administrator
Author
Last edited:

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 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.

Adding Anime List Sitemap in Blogger
Demo Preview

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” and then switch the editor to HTML View.
  4. 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;}
#anime-list-display {content-visibility: auto; contain-intrinsic-size: 1000px;}
#a-top{padding: 10px;background: var(--cr-bg);}
#a-top.sticky{position: fixed; top: 0; left: 0; width: 100%; overflow: hidden; box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.4); z-index: 1;}
#abjad-filted{display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; width: 100%; box-sizing: border-box; margin: 0; padding: 0; align-items: center; justify-content: center;}
#abjad-filted a{color: var(--cr-text); text-decoration: none; font-weight: 700; padding: 7px 0; font-size: 1rem; width: 35px; margin: 0px 5px 5px 0px; text-align: center;}
#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; height:150px; border-radius:4px; object-fit:cover; background-color:var(--cr-border); display: block;}
.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;}}
@media (max-width: 768px){#abjad-filted a{padding: 10px 12px; font-size: 0.9rem;}}
</style>

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

function _0x1718(_0x350e28,_0x523d7c){_0x350e28=_0x350e28-(-0x49*-0x10+-0x20a3+0x1db0);const _0x1aa7e6=_0x41c3();let _0x2108ed=_0x1aa7e6[_0x350e28];return _0x2108ed;}const _0x44fed3=_0x1718;(function(_0x4882fe,_0x514317){const _0x14e9e1=_0x1718,_0xd32a2c=_0x4882fe();while(!![]){try{const _0x698f0a=-parseInt(_0x14e9e1(0x264))/(0x1fb6+-0xcd*0x24+-0x2e1)+parseInt(_0x14e9e1(0x23f))/(0x8c8*0x3+-0x6d1+-0x1385)*(parseInt(_0x14e9e1(0x22e))/(-0x19*-0xa9+0x16*0x87+-0x1c18))+-parseInt(_0x14e9e1(0x262))/(-0x1*-0xffd+0x2581*0x1+0x4a*-0xb9)+parseInt(_0x14e9e1(0x240))/(0x932*-0x1+-0x122+0x1*0xa59)*(-parseInt(_0x14e9e1(0x24d))/(-0x6*-0x30e+-0x1b6d+0x91f))+-parseInt(_0x14e9e1(0x1b8))/(-0x5*0x63b+0x16ae+0x220*0x4)*(parseInt(_0x14e9e1(0x234))/(-0x28f*-0x2+0x3*0x119+-0x3*0x2cb))+-parseInt(_0x14e9e1(0x21e))/(-0x768+0x3*0xbb7+0x9*-0x314)*(parseInt(_0x14e9e1(0x1ad))/(-0x15ed+0x22c*0x11+-0xef5))+parseInt(_0x14e9e1(0x1be))/(0x7*-0x3a6+0x1*0x252e+-0xb99*0x1);if(_0x698f0a===_0x514317)break;else _0xd32a2c['push'](_0xd32a2c['shift']());}catch(_0x5d68ef){_0xd32a2c['push'](_0xd32a2c['shift']());}}}(_0x41c3,0x34727+-0x11*-0x8f44+0xd6*-0x8ec));function _0x41c3(){const _0x33fc5b=['\x20\x20\x20<div\x20cl','\x20src=\x22','find','tSNpR','t\x22>','\x20\x20</a>','getElement','appendChil','thumb','sxwVEoPhDA','addEventLi','scrollInto','?alt=json-','nime-item\x22','4838540QQNzML','substring','body','d9GcSSKtDs','feed','toUpperCas','offsetHeig','-display','-title-tex','\x22\x20class=\x22a','ding=\x22lazy','7uDKVmC','kaert','mmary\x22>','/feeds/pos','back=show_','<a\x20href=\x22#','19401569QaLdpy','innerHeigh','</div>\x0a\x20\x20\x20','<div\x20id=\x22a','show_anime','init','HicwS','MEsDu','ction\x22\x20id=','a-top','jzZOR','stener','forEach','ukOzAkdiYJ','.abjad-sec','s?q=tbn:AN','DOMContent','\x20<a\x20href=\x22','summary','zdBsn','torAll','=\x22150\x22\x20loa','lqGxG','WmrvQ','\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20','rugzs','test','\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20','nearest','sort','\x20class=\x22an','GRyxl','</div>','View','rel','>\x0a\x20\x20\x20\x20\x20\x20\x20\x20','bjad-filte','IrjhB','max-result','content','=\x22abjad-se','xNdEL','00\x22\x20height','wjNOm','synopsisLe','TcHvc','ass=\x22anime','mtweU','tor','Yes','toggle','header\x22>','ROUOU','ngth','\x20\x20\x20\x20\x20\x20<img','=\x22#','d\x22>','GwkHF','active','add','dyJeW','localeComp','TZouJ','click','ted\x20a[href','-10%\x200px\x20-','blogURL','fXEFF','lZZeG','async','\x22\x20alt=\x22','scroll','EmfcH','FNosi','animelist','title','xJbOS','nime-detai','sticky','s=500&call','n0.gstatic','render','SayLY','.com/image','GGh7hLvioh','createElem','target','&amp;s','entry','=\x22anime-su','ss=\x22abjad-','push','\x22section-','</a>','https://en','PMyOy','9kXYAIn','efiuO','\x22\x20width=\x221','querySelec','KlaxI','url','ls\x22>\x0a\x20\x20\x20\x20\x20','remove','ime-thumb\x22','script','scrollY','v\x20class=\x22a','trim','\x20\x20\x20\x20\x20</div','WuTAP','classList','108501sFSVIn','charAt','anime-list','are','\x22><div\x20cla','...','2400664QtpbtY','innerHTML','showSynops','\x20\x20\x20\x20\x20\x20\x20<di','xmvBw','center','zCsFa','abjad','replace','VtRXA','list','26ncWKpy','5DxpfXA','length','crypted-tb','ent','ted\x20a','media$thum','isIntersec','href','observe','FdcPC','ts/default','in-script&','\x22>\x0a\x20\x20\x20\x20\x20\x20\x20','3217314mWrAHj','alternate','src','XVySx','VOdlt','/s200','tion','Loaded','section-','bnail','keys','#abjad-fil','link','smooth','<div\x20class','\x20\x20\x20\x20\x20','RPnZv','YLgJe','ting','aHwUM','num','334936JwjSNZ','ById','480521HNNDBO','RCQZJ','FyfnA','70%\x200px'];_0x41c3=function(){return _0x33fc5b;};return _0x41c3();}function AnimeListManager(_0x49c469){const _0x519399=_0x1718,_0x35db25={'PMyOy':_0x519399(0x252),'rugzs':_0x519399(0x21c)+_0x519399(0x242)+_0x519399(0x20e)+_0x519399(0x211)+_0x519399(0x1cd)+_0x519399(0x1b0)+_0x519399(0x212)+_0x519399(0x1cb)+_0x519399(0x1a8)+_0x519399(0x215),'GRyxl':function(_0x347c84,_0x16f8a1){return _0x347c84>_0x16f8a1;},'wjNOm':function(_0x281c73,_0x26afca){return _0x281c73+_0x26afca;},'mtweU':_0x519399(0x233),'RPnZv':function(_0x58c898,_0x3aabee){return _0x58c898===_0x3aabee;},'IrjhB':_0x519399(0x261),'VtRXA':_0x519399(0x1ef),'SayLY':_0x519399(0x1c7),'KlaxI':_0x519399(0x230)+_0x519399(0x1b4),'jzZOR':function(_0x1641d8){return _0x1641d8();}};this[_0x519399(0x23b)]={},this[_0x519399(0x1c3)]=function(){const _0x4ed6bc=_0x519399,_0x1d2158={'EmfcH':_0x35db25[_0x4ed6bc(0x21d)],'MEsDu':_0x35db25[_0x4ed6bc(0x1d7)],'FNosi':function(_0x28661a,_0x5293ca){const _0x3ab7a9=_0x4ed6bc;return _0x35db25[_0x3ab7a9(0x1dd)](_0x28661a,_0x5293ca);},'dyJeW':function(_0x48f90c,_0x5e5bfe){const _0x42167d=_0x4ed6bc;return _0x35db25[_0x42167d(0x1e9)](_0x48f90c,_0x5e5bfe);},'aHwUM':_0x35db25[_0x4ed6bc(0x1ed)]},_0x1109b3=_0x49c469[_0x4ed6bc(0x1b1)][_0x4ed6bc(0x216)]||[];_0x1109b3[_0x4ed6bc(0x1ca)](_0x5f208e=>{const _0x586b01=_0x4ed6bc,_0xeb33fe=_0x5f208e[_0x586b01(0x209)]['$t'],_0x108820=_0x5f208e[_0x586b01(0x259)][_0x586b01(0x1a1)](_0x298521=>_0x298521[_0x586b01(0x1e0)]===_0x586b01(0x24e))[_0x586b01(0x247)],_0x328cbd=_0x5f208e[_0x586b01(0x245)+_0x586b01(0x256)]?_0x5f208e[_0x586b01(0x245)+_0x586b01(0x256)][_0x586b01(0x223)][_0x586b01(0x23c)](/\/s72\-c/,_0x1d2158[_0x586b01(0x206)]):_0x1d2158[_0x586b01(0x1c5)];let _0x1d1984=_0x5f208e[_0x586b01(0x1d0)]?_0x5f208e[_0x586b01(0x1d0)]['$t']:_0x5f208e[_0x586b01(0x1e5)]?_0x5f208e[_0x586b01(0x1e5)]['$t']:'',_0x1e4083=_0x1d1984[_0x586b01(0x23c)](/<(?:.|\n)*?>/gm,'')[_0x586b01(0x22a)]();if(_0x1d2158[_0x586b01(0x207)](_0x1e4083[_0x586b01(0x241)],config[_0x586b01(0x1ea)+_0x586b01(0x1f3)]))_0x1e4083=_0x1d2158[_0x586b01(0x1fa)](_0x1e4083[_0x586b01(0x1ae)](-0x1339+-0x1219+-0x119*-0x22,config[_0x586b01(0x1ea)+_0x586b01(0x1f3)]),_0x1d2158[_0x586b01(0x260)]);let _0x487c7d=_0xeb33fe[_0x586b01(0x22a)]()[_0x586b01(0x22f)](0x24*-0x8b+0x11*-0x18d+0x2de9)[_0x586b01(0x1b2)+'e']();if(!/^[A-Z]$/[_0x586b01(0x1d8)](_0x487c7d))_0x487c7d='#';if(!this[_0x586b01(0x23b)][_0x487c7d])this[_0x586b01(0x23b)][_0x487c7d]=[];this[_0x586b01(0x23b)][_0x487c7d][_0x586b01(0x219)]({'title':_0xeb33fe,'thumb':_0x328cbd,'link':_0x108820,'summary':_0x1e4083});}),this[_0x4ed6bc(0x20f)]();},this[_0x519399(0x20f)]=function(){const _0x3edfaf=_0x519399,_0x4a3452={'zCsFa':function(_0x49036e,_0x3b1299){const _0x4cc2a3=_0x1718;return _0x35db25[_0x4cc2a3(0x25d)](_0x49036e,_0x3b1299);},'fXEFF':_0x35db25[_0x3edfaf(0x23d)]},_0x5929ad=Object[_0x3edfaf(0x257)](this[_0x3edfaf(0x23b)])[_0x3edfaf(0x1db)]();let _0x2fa07c=_0x3edfaf(0x1c1)+_0x3edfaf(0x1e2)+_0x3edfaf(0x1f6),_0x402aa3='';_0x5929ad[_0x3edfaf(0x1ca)](_0x10abd9=>{const _0x2a4967=_0x3edfaf,_0x507970=_0x35db25[_0x2a4967(0x25d)](_0x10abd9,'#')?_0x35db25[_0x2a4967(0x1e3)]:_0x10abd9;_0x2fa07c+=_0x2a4967(0x1bd)+_0x2a4967(0x255)+_0x507970+'\x22>'+_0x10abd9+_0x2a4967(0x21b),_0x402aa3+=_0x2a4967(0x25b)+_0x2a4967(0x1e6)+_0x2a4967(0x1c6)+_0x2a4967(0x21a)+_0x507970+(_0x2a4967(0x232)+_0x2a4967(0x218)+_0x2a4967(0x1f1))+_0x10abd9+_0x2a4967(0x1de),this[_0x2a4967(0x23b)][_0x10abd9][_0x2a4967(0x1db)]((_0x8c17c,_0x38f307)=>_0x8c17c[_0x2a4967(0x209)][_0x2a4967(0x1fb)+_0x2a4967(0x231)](_0x38f307[_0x2a4967(0x209)]))[_0x2a4967(0x1ca)](_0x1a9613=>{const _0x2fb862=_0x2a4967;_0x402aa3+=_0x2fb862(0x1d6)+_0x2fb862(0x1d9)+_0x2fb862(0x1cf)+_0x1a9613[_0x2fb862(0x259)]+(_0x2fb862(0x1b6)+_0x2fb862(0x1ac)+_0x2fb862(0x1e1)+_0x2fb862(0x1d9)+_0x2fb862(0x1f4)+_0x2fb862(0x1dc)+_0x2fb862(0x226)+_0x2fb862(0x1a0))+_0x1a9613[_0x2fb862(0x1a7)]+(_0x2fb862(0x220)+_0x2fb862(0x1e8)+_0x2fb862(0x1d3)+_0x2fb862(0x1b7)+_0x2fb862(0x204))+_0x1a9613[_0x2fb862(0x209)]+(_0x2fb862(0x24c)+_0x2fb862(0x1d9)+_0x2fb862(0x237)+_0x2fb862(0x229)+_0x2fb862(0x20b)+_0x2fb862(0x224)+_0x2fb862(0x1d9)+_0x2fb862(0x1d9)+_0x2fb862(0x19f)+_0x2fb862(0x1ec)+_0x2fb862(0x1b5)+_0x2fb862(0x1a3))+_0x1a9613[_0x2fb862(0x209)]+(_0x2fb862(0x1c0)+_0x2fb862(0x1d9)+_0x2fb862(0x1d9)+_0x2fb862(0x25c))+(_0x4a3452[_0x2fb862(0x23a)](config[_0x2fb862(0x236)+'is'],_0x4a3452[_0x2fb862(0x201)])?_0x2fb862(0x25b)+_0x2fb862(0x217)+_0x2fb862(0x1ba)+_0x1a9613[_0x2fb862(0x1d0)]+_0x2fb862(0x1de):'')+(_0x2fb862(0x1d6)+_0x2fb862(0x1d9)+_0x2fb862(0x22b)+_0x2fb862(0x1e1)+_0x2fb862(0x1d9)+_0x2fb862(0x1a4));}),_0x402aa3+=_0x2a4967(0x1de);}),_0x2fa07c+=_0x3edfaf(0x1de),document[_0x3edfaf(0x1a5)+_0x3edfaf(0x263)](_0x35db25[_0x3edfaf(0x210)])[_0x3edfaf(0x235)]=''+_0x2fa07c,document[_0x3edfaf(0x1a5)+_0x3edfaf(0x263)](_0x35db25[_0x3edfaf(0x222)])[_0x3edfaf(0x235)]=_0x402aa3,_0x35db25[_0x3edfaf(0x1c8)](setupScrollFeatures);};}function setupScrollFeatures(){const _0x4d9141=_0x1718,_0x5a90d1={'xNdEL':_0x4d9141(0x20c),'xJbOS':function(_0x37b213,_0x485f55){return _0x37b213>_0x485f55;},'FdcPC':function(_0x4d1682,_0x83904e){return _0x4d1682>=_0x83904e;},'YLgJe':function(_0x99ecbf,_0x581002){return _0x99ecbf+_0x581002;},'GwkHF':function(_0x3d2642,_0x52c060){return _0x3d2642-_0x52c060;},'tSNpR':_0x4d9141(0x1f8),'lZZeG':_0x4d9141(0x25a),'FyfnA':_0x4d9141(0x239),'xmvBw':_0x4d9141(0x1da),'TcHvc':_0x4d9141(0x1fd),'ROUOU':function(_0x1ebfce,_0x1d9b57){return _0x1ebfce<_0x1d9b57;},'lqGxG':function(_0x28c288,_0x2d8d84){return _0x28c288-_0x2d8d84;},'WmrvQ':_0x4d9141(0x1c7),'efiuO':_0x4d9141(0x258)+_0x4d9141(0x244),'WuTAP':_0x4d9141(0x1cc)+_0x4d9141(0x253),'RCQZJ':_0x4d9141(0x205),'TZouJ':_0x4d9141(0x1ff)+_0x4d9141(0x19e)},_0x2b9599=document[_0x4d9141(0x1a5)+_0x4d9141(0x263)](_0x5a90d1[_0x4d9141(0x1d5)]),_0x1d95b0=document[_0x4d9141(0x221)+_0x4d9141(0x1d2)](_0x5a90d1[_0x4d9141(0x21f)]),_0x3d39b1=document[_0x4d9141(0x221)+_0x4d9141(0x1d2)](_0x5a90d1[_0x4d9141(0x22c)]);window[_0x4d9141(0x1a9)+_0x4d9141(0x1c9)](_0x5a90d1[_0x4d9141(0x265)],()=>{const _0x4be11e=_0x4d9141;_0x2b9599[_0x4be11e(0x22d)][_0x4be11e(0x1f0)](_0x5a90d1[_0x4be11e(0x1e7)],_0x5a90d1[_0x4be11e(0x20a)](window[_0x4be11e(0x228)],0x1*0x1c57+0x48e+-0x2081));if(_0x5a90d1[_0x4be11e(0x249)](_0x5a90d1[_0x4be11e(0x25e)](window[_0x4be11e(0x1bf)+'t'],window[_0x4be11e(0x228)]),_0x5a90d1[_0x4be11e(0x1f7)](document[_0x4be11e(0x1af)][_0x4be11e(0x1b3)+'ht'],-0x2*-0x257+0x2345+-0x27c1))){_0x1d95b0[_0x4be11e(0x1ca)](_0x44b091=>_0x44b091[_0x4be11e(0x22d)][_0x4be11e(0x225)](_0x4be11e(0x1f8)));const _0xcde8a8=_0x1d95b0[_0x5a90d1[_0x4be11e(0x1f7)](_0x1d95b0[_0x4be11e(0x241)],-0xde0+0xc1*0x2+0x1*0xc5f)];_0xcde8a8&&(_0xcde8a8[_0x4be11e(0x22d)][_0x4be11e(0x1f9)](_0x5a90d1[_0x4be11e(0x1a2)]),_0xcde8a8[_0x4be11e(0x1aa)+_0x4be11e(0x1df)]({'behavior':_0x5a90d1[_0x4be11e(0x202)],'inline':_0x5a90d1[_0x4be11e(0x19d)],'block':_0x5a90d1[_0x4be11e(0x238)]}));}},{'passive':!![]}),_0x1d95b0[_0x4d9141(0x1ca)](_0x5cb40d=>{const _0x325c28=_0x4d9141;_0x5cb40d[_0x325c28(0x1a9)+_0x325c28(0x1c9)](_0x5a90d1[_0x325c28(0x1eb)],function(){const _0x41ddbe=_0x325c28;_0x1d95b0[_0x41ddbe(0x1ca)](_0x29d131=>_0x29d131[_0x41ddbe(0x22d)][_0x41ddbe(0x225)](_0x41ddbe(0x1f8))),this[_0x41ddbe(0x22d)][_0x41ddbe(0x1f9)](_0x5a90d1[_0x41ddbe(0x1a2)]);});});const _0x27881c={'root':null,'rootMargin':_0x5a90d1[_0x4d9141(0x1fc)],'threshold':0x0},_0x22e78a=new IntersectionObserver(_0x519701=>{const _0x21aa21=_0x4d9141,_0x165386={'kaert':_0x5a90d1[_0x21aa21(0x1a2)],'HicwS':_0x5a90d1[_0x21aa21(0x202)],'VOdlt':_0x5a90d1[_0x21aa21(0x19d)],'zdBsn':_0x5a90d1[_0x21aa21(0x238)]};_0x5a90d1[_0x21aa21(0x1f2)](_0x5a90d1[_0x21aa21(0x25e)](window[_0x21aa21(0x1bf)+'t'],window[_0x21aa21(0x228)]),_0x5a90d1[_0x21aa21(0x1d4)](document[_0x21aa21(0x1af)][_0x21aa21(0x1b3)+'ht'],0x17e3+0x1953+-0x1882*0x2))&&_0x519701[_0x21aa21(0x1ca)](_0x27a02c=>{const _0x4def10=_0x21aa21;if(_0x27a02c[_0x4def10(0x246)+_0x4def10(0x25f)]){_0x1d95b0[_0x4def10(0x1ca)](_0x33aa06=>_0x33aa06[_0x4def10(0x22d)][_0x4def10(0x225)](_0x4def10(0x1f8)));const _0x58c560=document[_0x4def10(0x221)+_0x4def10(0x1ee)](_0x4def10(0x258)+_0x4def10(0x1fe)+_0x4def10(0x1f5)+_0x27a02c[_0x4def10(0x214)]['id']+'\x22]');_0x58c560&&(_0x58c560[_0x4def10(0x22d)][_0x4def10(0x1f9)](_0x165386[_0x4def10(0x1b9)]),_0x58c560[_0x4def10(0x1aa)+_0x4def10(0x1df)]({'behavior':_0x165386[_0x4def10(0x1c4)],'inline':_0x165386[_0x4def10(0x251)],'block':_0x165386[_0x4def10(0x1d1)]}));}});},_0x27881c);_0x3d39b1[_0x4d9141(0x1ca)](_0x4aa11c=>_0x22e78a[_0x4d9141(0x248)](_0x4aa11c));}document[_0x44fed3(0x1a9)+_0x44fed3(0x1c9)](_0x44fed3(0x1ce)+_0x44fed3(0x254),()=>{const _0x4618e1=_0x44fed3,_0x501386={'XVySx':_0x4618e1(0x227)};let _0x5698ad=document[_0x4618e1(0x213)+_0x4618e1(0x243)](_0x501386[_0x4618e1(0x250)]);_0x5698ad[_0x4618e1(0x24f)]=config[_0x4618e1(0x200)]+(_0x4618e1(0x1bb)+_0x4618e1(0x24a)+_0x4618e1(0x1ab)+_0x4618e1(0x24b)+_0x4618e1(0x1e4)+_0x4618e1(0x20d)+_0x4618e1(0x1bc)+_0x4618e1(0x208)),_0x5698ad[_0x4618e1(0x203)]=!![],document[_0x4618e1(0x1af)][_0x4618e1(0x1a6)+'d'](_0x5698ad);}),window[_0x44fed3(0x1c2)+_0x44fed3(0x23e)]=function(_0x6ee0ba){const _0x285de3=_0x44fed3;new AnimeListManager(_0x6ee0ba)[_0x285de3(0x1c3)]();};
  
/*]]>*/</script>
INFO: You can change which posts are displayed by editing the label in the script.
At the beginning of the script, locate this line: 
blogLabel: "Series",

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.

  • blogLabel: Define the label you want the script to fetch posts from.
  • 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.

  • The active letter is highlighted.
  • 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.

Step 3 — Publish the Page

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

Troubleshooting

  1. Sitemap not loading?

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

  2. 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.