How to Add a Crunchyroll-Style HTML Sitemap to Your Website

Dida

Administrator

Author

Last edited: Monday, September 28, 2026

I’ve created a new HTML sitemap design for you to display on your website. Unlike my previous HTML sitemap with live search, this design is inspired by the A–Z directory on Crunchyroll’s Anime site.

In this tutorial, you’ll learn how to add a Crunchyroll-style HTML sitemap to Blogger, giving your site a modern, organized, and user-friendly interface. This design is perfect for blogs that publish movie, TV series, or anime reviews. Visitors can see all of your titles in one place, making it easier and faster to find the content they’re looking for. It’s smooth, easy to navigate, fully Dark Mode ready, and mobile-friendly.

Demo Preview

Why a Crunchyroll Layout?

I really like the clean layout of Crunchyroll and the way it lets you view all your posts in alphabetical order. You can also select a letter, and it will automatically take you to the posts that begin with that letter. The sticky header stays visible as you scroll down, making navigation much easier.

So, why not bring this layout to Blogger?

One of the most useful features of my HTML sitemap is that it automatically detects the first letter of each post title. This means you don’t have to manually add, sort, or organize the letters yourself—the sitemap does it automatically for you.

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

Step 1: Create New Page

You need a dedicated page for your posts.

Go to your Blogger Dashboard, navigate to Pages, and click + New Page.
Once you’re in the page editor, title it “All Posts” or “Sitemap.” Then click the pencil icon to switch to HTML view.

Clear anything in the editor before inserting the script.

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

Note: The core logic of this script is compiled and protected to prevent unauthorized redistribution. However, the customizable parameters (blogLabel, showSynopsis, and synopsisLength) are fully editable.

Step 2: What You Must Change

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

blogLabel: The label from which you want the script to fetch posts.
showSynopsis: Determines whether the post description is displayed or hidden.
synopsisLength: Controls how many characters are displayed in each post description.

Variable	Example
blogLabel	blogLabel: "Blogger",
showSynopsis	showSynopsis: "Yes",
synopsisLength	synopsisLength: "300",

Styling (Optional)

If you want to change the theme color, simply edit the CSS variable under :root:

--cr-bg: #ffffff; --cr-text: #000000; --cr-subtext: #666666; --cr-border: #e0e0e0; --cr-orange: #f47521;

This variable controls the background color for light mode.

For dark mode, look for: [data-theme="dark"]

You can customize the colors inside this section to change the appearance of dark mode.

If you’re satisfied with how the light and dark modes look and only want to change the key color, look for the CSS variable:

--cr-orange: #f47521;

Change its value to your preferred color.

Step 3: Publish the Page

After you finish setting up or modifying the sitemap:

Click Publish or Update
Click View to confirm that your posts are loading correctly.

If the Sitemap Is Not Loading

If you encounter problems, such as the sitemap not loading, check the following:

Make sure your blog is public. Private blogs can block JSON feeds.
Check that the callback parameter in the script is still intact.
Make sure you haven't renamed or changed any of the class names in the script.

If the Content Overlaps Your Sidebar

If you add the sitemap to a Gadget and notice that the content overlaps with your sidebar, try switching your page layout to full width.

You can do this from your Blogger Dashboard → Theme → Customize → Advanced.

Pro tip: Don't forget to add the sitemap link to your main menu or footer so visitors can easily access it.

Final Thoughts

You might be wondering: Why do I need an HTML sitemap if visitors can simply search for posts from the homepage?

In my opinion, having an HTML sitemap may not have a significant impact on SEO, but it can make your website easier and more enjoyable to navigate. It also gives visitors quick access to all of your posts in one place.

We should continue to improve and upgrade our website navigation. We live in a modern, increasingly visual world, so making content easier to discover and navigate can create a better experience for our visitors. Learn more about Blogging Tips.

Contact Form