Image
Dida
Administrator
Author
Last edited:

While looking at my homepage, I wondered what kind of HTML sitemap would be useful for readers. If they want to browse older posts, there’s already the Blog Archive. If they’re looking for a specific post, they can use the Blog Search. So, I came up with an HTML sitemap with live search and filtering, allowing readers to browse all of your posts in one place.

In this tutorial, you’ll learn how to add an HTML sitemap with Live Search instead of plain, boring text links. Users can browse posts by label, search by keyword (matching the title or snippet of your posts), and sort posts by newest or recently updated.

Adding an HTML Sitemap in Blogger

You can customize the sitemap’s style to match your theme and add it as a widget or page. For the best appearance, avoid placing it in the sidebar. If you don’t to display the post thumbnails, you can hide them with display: none;.

Also read: How to Add a Crunchyroll-Style HTML Sitemap to Your Website

Step 1: Create New Page

  1. Log in to your Blogger Dashboard.
  2. Go to Pages in the left sidebar
  3. Click + NEW PAGE. Give the page a title (e.g., "Sitemap" or "Archive")
  4. In the page editor, click the Pencil icon in the top left corner, then select HTML view Screenshot on how to change from Compose view to HTML view
  5. Delete any existing code in the editor and paste the entire code (HTML, Script, and Style) 
      <div class="sm-topbar">
  <div class="sm-search-wrapper">
    <input class="sm-search" id="search" placeholder="Search posts..." type="search"/>
    <div class="sm-search-icon">
      <svg viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" fill="currentColor"/></svg>
    </div>
  </div>
    
   <div class="sm-filters">
    <select id="sort">
      <option value="published">Latest Posts</option>
      <option value="updated">Latest Updated</option>
    </select>

    <select id="category">
      <option value="">All</option>
    </select>
  </div>
</div>

<div class="sm-count" id="count">Loading...</div>
<div class="sm-posts" id="posts"></div>
<div id="load-more-container" style="text-align:center; padding: 20px;">
  <button id="load-more-btn" class="sm-btn-more">Load More</button>
</div>

<script>//<![CDATA[
const blogURL = window.location.protocol + "//" + window.location.hostname;
const postsPerLoad = 30;
const manualLabels = ["Anime", "Blogger", "Comics", "Recommendations", "Social Media", "Tutorial"];
let nextPage = 1;
let currentLabel = "";
let currentSort = "published";
let searchQuery = "";

const _0x3e9b02=_0x2b7d;(function(_0xd988b8,_0x3da1ff){const _0x438684=_0x2b7d,_0x89f2d6=_0xd988b8();while(!![]){try{const _0x3b6268=parseInt(_0x438684(0x276))/(0x2e7*0xa+0x1*-0xd49+-0xfbc)*(-parseInt(_0x438684(0x224))/(0x1826+-0x1642*-0x1+-0x2e66))+-parseInt(_0x438684(0x25f))/(-0x25d0+0x1ee3*-0x1+-0xa*-0x6df)*(parseInt(_0x438684(0x275))/(-0x7*-0x547+0x2*-0x2f6+-0x1*0x1f01))+-parseInt(_0x438684(0x281))/(0xd0*0x2f+-0x641+-0x1fea)*(-parseInt(_0x438684(0x22d))/(0x6*0x432+0x1*-0x1282+0x22*-0x32))+-parseInt(_0x438684(0x25d))/(0xaeb+-0xba6+0x1*0xc2)+-parseInt(_0x438684(0x288))/(-0x2d5*0x7+0x1*0x148d+-0x59*0x2)+-parseInt(_0x438684(0x20b))/(-0x199a*-0x1+0x2bd*0x4+-0x1*0x2485)*(parseInt(_0x438684(0x28d))/(-0x1b90+-0x269a+0x4234))+parseInt(_0x438684(0x283))/(0xd*0x72+0x13*-0x13+-0x2*0x22b);if(_0x3b6268===_0x3da1ff)break;else _0x89f2d6['push'](_0x89f2d6['shift']());}catch(_0x31a98a){_0x89f2d6['push'](_0x89f2d6['shift']());}}}(_0x1ee2,0x185b8+-0x64487*-0x1+-0x8*-0x28c));function initManualLabels(){const _0x5415d1=_0x2b7d,_0x3dff04={'zejTZ':_0x5415d1(0x203),'tyFLp':_0x5415d1(0x219)},_0x7138cb=document[_0x5415d1(0x262)+_0x5415d1(0x278)](_0x3dff04[_0x5415d1(0x26c)]);manualLabels[_0x5415d1(0x213)](_0x32d461=>{const _0x3e900a=_0x5415d1,_0x59f02b=document[_0x3e900a(0x241)+_0x3e900a(0x22b)](_0x3dff04[_0x3e900a(0x269)]);_0x59f02b[_0x3e900a(0x22a)]=_0x32d461,_0x59f02b[_0x3e900a(0x21d)+'t']=_0x32d461,_0x7138cb[_0x3e900a(0x23e)+'d'](_0x59f02b);});}async function loadPosts(_0x2468e3=!(-0x207d+0x1a+0x2064)){const _0x12ebb2=_0x2b7d,_0x18d499={'uFrez':_0x12ebb2(0x238),'OqUkV':function(_0xf76de3,_0x3399e6){return _0xf76de3!==_0x3399e6;},'lsPer':_0x12ebb2(0x227),'SvxGN':_0x12ebb2(0x27e)+_0x12ebb2(0x27f)+_0x12ebb2(0x26b)+_0x12ebb2(0x257)+_0x12ebb2(0x229)+_0x12ebb2(0x22e)+_0x12ebb2(0x204)+_0x12ebb2(0x26f)+_0x12ebb2(0x260)+'&s','lIPAT':function(_0x43b713,_0x1f0d14){return _0x43b713+_0x1f0d14;},'DaPNr':_0x12ebb2(0x24d),'jOIYz':_0x12ebb2(0x23c),'EyXdz':_0x12ebb2(0x214),'kKXAi':_0x12ebb2(0x1f4)+_0x12ebb2(0x208),'GHEDw':_0x12ebb2(0x1fc)+_0x12ebb2(0x277),'KsmWM':_0x12ebb2(0x24f),'rGBru':function(_0x1af8b3,_0x20b90f){return _0x1af8b3*_0x20b90f;},'PlaGM':function(_0x5e13af,_0x308e30){return _0x5e13af-_0x308e30;},'SBsCo':function(_0x268ef3,_0x1edbf3){return _0x268ef3===_0x1edbf3;},'SXZmO':_0x12ebb2(0x21a),'LLFhB':_0x12ebb2(0x217)+_0x12ebb2(0x243),'rxsWs':function(_0x13816c,_0x7ac06e){return _0x13816c(_0x7ac06e);},'ZDbLc':_0x12ebb2(0x254),'oDkXr':_0x12ebb2(0x271),'AHoMx':_0x12ebb2(0x1ee),'vUjtD':function(_0x98215b,_0x3334d7){return _0x98215b<_0x3334d7;},'ZtuTw':_0x12ebb2(0x252)+_0x12ebb2(0x28c),'sciQM':_0x12ebb2(0x225),'xkzlr':_0x12ebb2(0x216)},_0x3f29a9=document[_0x12ebb2(0x262)+_0x12ebb2(0x278)](_0x18d499[_0x12ebb2(0x239)]);let _0x1c1235=_0x18d499[_0x12ebb2(0x27c)](blogURL,_0x18d499[_0x12ebb2(0x25b)]);currentLabel&&(_0x1c1235+=_0x18d499[_0x12ebb2(0x27c)](_0x18d499[_0x12ebb2(0x23a)],currentLabel)),_0x1c1235+=_0x12ebb2(0x200)+_0x12ebb2(0x25e)+'s='+postsPerLoad+(_0x12ebb2(0x24a)+_0x12ebb2(0x1ff))+_0x18d499[_0x12ebb2(0x27c)](_0x18d499[_0x12ebb2(0x1f1)](_0x18d499[_0x12ebb2(0x287)](nextPage,-0x2023+0x1*-0x10e8+0x4*0xc43),postsPerLoad),-0xd2b+0xa*0x264+0x4*-0x2af),_0x18d499[_0x12ebb2(0x274)](_0x18d499[_0x12ebb2(0x223)],currentSort)&&(_0x1c1235+=_0x18d499[_0x12ebb2(0x1f9)]);const _0x2b189a=await _0x18d499[_0x12ebb2(0x279)](fetch,_0x1c1235),_0x2b50aa=await _0x2b189a[_0x12ebb2(0x28f)](),_0x536d41=_0x2b50aa[_0x12ebb2(0x27b)][_0x12ebb2(0x259)+_0x12ebb2(0x28a)+_0x12ebb2(0x244)]['$t'],_0x1e013f=document[_0x12ebb2(0x262)+_0x12ebb2(0x278)](_0x18d499[_0x12ebb2(0x207)]);_0x2468e3&&(_0x1e013f[_0x12ebb2(0x248)]='',_0x3f29a9[_0x12ebb2(0x270)]=_0x18d499[_0x12ebb2(0x24b)],_0x3f29a9[_0x12ebb2(0x22c)]=!(-0x2*0xb12+-0x13b2+-0x29d7*-0x1));let _0x143c93=_0x2b50aa[_0x12ebb2(0x27b)][_0x12ebb2(0x1fe)]||[];if(searchQuery){const _0x2d211f=searchQuery[_0x12ebb2(0x209)+'e']();_0x143c93=_0x143c93[_0x12ebb2(0x1f0)](_0x190f2e=>{const _0x13357d=_0x12ebb2,_0x19be4a=_0x190f2e[_0x13357d(0x26d)]['$t'][_0x13357d(0x209)+'e'](),_0x481c93=_0x190f2e[_0x13357d(0x219)]?_0x190f2e[_0x13357d(0x219)][_0x13357d(0x236)](_0x21383a=>_0x21383a[_0x13357d(0x228)][_0x13357d(0x209)+'e']()):[];return _0x19be4a[_0x13357d(0x231)](_0x2d211f)||_0x481c93[_0x13357d(0x263)](_0x5c9315=>_0x5c9315[_0x13357d(0x231)](_0x2d211f));}),document[_0x12ebb2(0x262)+_0x12ebb2(0x278)](_0x18d499[_0x12ebb2(0x206)])[_0x12ebb2(0x270)]=_0x143c93[_0x12ebb2(0x1f6)]+(_0x12ebb2(0x284)+_0x12ebb2(0x233))+searchQuery+'\x22';}else document[_0x12ebb2(0x262)+_0x12ebb2(0x278)](_0x18d499[_0x12ebb2(0x206)])[_0x12ebb2(0x270)]=_0x536d41+(_0x12ebb2(0x226)+_0x12ebb2(0x1f7));_0x18d499[_0x12ebb2(0x258)](_0x143c93[_0x12ebb2(0x1f6)],postsPerLoad)&&(_0x3f29a9[_0x12ebb2(0x270)]=_0x18d499[_0x12ebb2(0x285)],_0x3f29a9[_0x12ebb2(0x22c)]=!(0x859+0x1*-0x125d+0x281*0x4),_0x3f29a9[_0x12ebb2(0x222)][_0x12ebb2(0x1f8)]=_0x18d499[_0x12ebb2(0x21c)],_0x3f29a9[_0x12ebb2(0x222)][_0x12ebb2(0x24c)]=_0x18d499[_0x12ebb2(0x27a)]),_0x143c93[_0x12ebb2(0x213)](_0x632888=>{const _0x6dd8ef=_0x12ebb2,_0x432701=_0x632888[_0x6dd8ef(0x26e)][_0x6dd8ef(0x23d)](_0x4403b1=>_0x6dd8ef(0x21b)===_0x4403b1[_0x6dd8ef(0x256)])[_0x6dd8ef(0x21e)];let _0x226da5='';if(_0x632888[_0x6dd8ef(0x215)+_0x6dd8ef(0x232)])_0x226da5=_0x632888[_0x6dd8ef(0x215)+_0x6dd8ef(0x232)][_0x6dd8ef(0x255)];else{if(_0x632888[_0x6dd8ef(0x230)]&&_0x632888[_0x6dd8ef(0x230)]['$t'][_0x6dd8ef(0x231)](_0x18d499[_0x6dd8ef(0x1f5)])){const _0x417993=_0x632888[_0x6dd8ef(0x230)]['$t'][_0x6dd8ef(0x20c)](/src=["']([^"']+)["']/);_0x226da5=_0x417993?_0x417993[0x3f*-0x3+-0x5*0x6a9+0x15*0x19f]:'';}}_0x226da5=_0x18d499[_0x6dd8ef(0x237)]('',_0x226da5)?_0x226da5[_0x6dd8ef(0x253)](/\/s[0-9]+(-c)?\//,_0x18d499[_0x6dd8ef(0x235)]):_0x18d499[_0x6dd8ef(0x21f)];let _0x4d7efe='';_0x632888[_0x6dd8ef(0x220)]?_0x4d7efe=_0x632888[_0x6dd8ef(0x220)]['$t']:_0x632888[_0x6dd8ef(0x230)]&&(_0x4d7efe=_0x632888[_0x6dd8ef(0x230)]['$t'][_0x6dd8ef(0x253)](/<[^>]*>?/gm,'')),_0x4d7efe=_0x18d499[_0x6dd8ef(0x27c)](_0x4d7efe[_0x6dd8ef(0x27d)](-0x1ec4+0x215+0x1caf,0x39*-0x29+0x58f+0x184*0x3),_0x18d499[_0x6dd8ef(0x272)]);const _0x2407a4=new Date(_0x632888[_0x6dd8ef(0x20d)]['$t'])[_0x6dd8ef(0x28b)+_0x6dd8ef(0x268)](),_0x63ab35=document[_0x6dd8ef(0x241)+_0x6dd8ef(0x22b)](_0x18d499[_0x6dd8ef(0x245)]);_0x63ab35[_0x6dd8ef(0x261)]=_0x18d499[_0x6dd8ef(0x246)],_0x63ab35[_0x6dd8ef(0x248)]=_0x6dd8ef(0x250)+_0x6dd8ef(0x218)+_0x632888[_0x6dd8ef(0x26d)]['$t']+(_0x6dd8ef(0x1f3)+_0x6dd8ef(0x205)+_0x6dd8ef(0x201))+_0x226da5+(_0x6dd8ef(0x221)+_0x6dd8ef(0x266)+_0x6dd8ef(0x210)+_0x6dd8ef(0x273)+_0x6dd8ef(0x25a)+_0x6dd8ef(0x202)+_0x6dd8ef(0x289))+_0x632888[_0x6dd8ef(0x26d)]['$t']+_0x6dd8ef(0x280)+_0x432701+(_0x6dd8ef(0x1fd)+_0x6dd8ef(0x25c))+_0x632888[_0x6dd8ef(0x26d)]['$t']+(_0x6dd8ef(0x265)+_0x6dd8ef(0x20a)+_0x6dd8ef(0x266)+_0x6dd8ef(0x26a)+_0x6dd8ef(0x286)+_0x6dd8ef(0x20e)+_0x6dd8ef(0x242)+_0x6dd8ef(0x28e)+_0x6dd8ef(0x20f)+_0x6dd8ef(0x1fa))+_0x4d7efe+(_0x6dd8ef(0x1f2)+_0x6dd8ef(0x273)+_0x6dd8ef(0x212)+'\x22>')+_0x2407a4+(_0x6dd8ef(0x247)+_0x6dd8ef(0x24e)),_0x1e013f[_0x6dd8ef(0x23e)+'d'](_0x63ab35);}),nextPage++;}document[_0x3e9b02(0x262)+_0x3e9b02(0x278)](_0x3e9b02(0x249))[_0x3e9b02(0x240)]=function(){const _0x24447e=_0x3e9b02,_0x26a375={'sxjdV':function(_0x51d032,_0x797ec4){return _0x51d032(_0x797ec4);}};currentSort=this[_0x24447e(0x22a)],nextPage=0x1388+0x6aa+-0x1a31,_0x26a375[_0x24447e(0x1fb)](loadPosts,!(-0x2b*-0x48+0x58d+-0x11a5*0x1));},document[_0x3e9b02(0x262)+_0x3e9b02(0x278)](_0x3e9b02(0x219))[_0x3e9b02(0x240)]=function(){const _0x27126d=_0x3e9b02,_0x30f528={'TUBbF':function(_0x4ff72b,_0x302c2e){return _0x4ff72b(_0x302c2e);}};currentLabel=this[_0x27126d(0x22a)],nextPage=-0x14*-0x14e+0x1a5e+0x1*-0x3475,_0x30f528[_0x27126d(0x23b)](loadPosts,!(-0x89b*-0x3+0x76d*0x1+-0x353*0xa));},document[_0x3e9b02(0x262)+_0x3e9b02(0x278)](_0x3e9b02(0x267))[_0x3e9b02(0x282)]=function(){const _0x49f278=_0x3e9b02,_0x418457={'vqbmM':function(_0x53b24e,_0x31ad5e){return _0x53b24e(_0x31ad5e);}};searchQuery=this[_0x49f278(0x22a)],nextPage=0x1754+-0x347*-0x1+-0x1a9a*0x1,_0x418457[_0x49f278(0x1ef)](loadPosts,!(-0x1*0x12f9+0x1cf7+-0x9fe));},document[_0x3e9b02(0x262)+_0x3e9b02(0x278)](_0x3e9b02(0x1f4)+_0x3e9b02(0x208))[_0x3e9b02(0x23f)]=function(){const _0x567cf7=_0x3e9b02,_0x2709c7={'HMuQs':_0x567cf7(0x271),'ZaiuH':_0x567cf7(0x234),'ueqBA':function(_0x1e9249){return _0x1e9249();}};if(this[_0x567cf7(0x22c)])return;this[_0x567cf7(0x270)],(this[_0x567cf7(0x270)]=_0x2709c7[_0x567cf7(0x264)],_0x2709c7[_0x567cf7(0x22f)](loadPosts)[_0x567cf7(0x251)](()=>{const _0x12f38f=_0x567cf7;this[_0x12f38f(0x22c)]||(this[_0x12f38f(0x270)]=_0x2709c7[_0x12f38f(0x211)]);}));};function _0x2b7d(_0x2acf77,_0x423946){_0x2acf77=_0x2acf77-(-0x1fc+0x15cf+-0x3*0x5f7);const _0x7b2754=_0x1ee2();let _0x4ca8bb=_0x7b2754[_0x2acf77];return _0x4ca8bb;}function _0x1ee2(){const _0x2da760=['info\x22>\x0a\x20\x20\x20','HMuQs','s=\x22sm-date','forEach','sm-post','media$thum','default','&orderby=u','t=\x22','category','updated','alternate','sciQM','textConten','href','SvxGN','summary','\x22>\x0a\x20\x20<div\x20','style','SXZmO','4KVjVPL','0.5','\x20total\x20pos','/s1600/','term','s?q=tbn:AN','value','ent','disabled','552KGiyMc','d9GcTxYv-U','ueqBA','content','includes','bnail','atching\x20\x22','Loading...','lsPer','map','OqUkV','<img','kKXAi','KsmWM','TUBbF','div','find','appendChil','onclick','onchange','createElem','x;\x20color:\x20','pdated','lts','jOIYz','EyXdz','</div>\x0a\x20\x20<','innerHTML','sort','&start-ind','oDkXr','cursor','...','/div>\x0a','/-/','\x0a\x20\x20<img\x20al','then','No\x20More\x20Po','replace','posts','url','rel','.com/image','vUjtD','openSearch','s=\x22sm-titl','GHEDw','_self\x22>','3740863kzrsAW','max-result','6ygVrnq','Z6qZKuCrIA','className','getElement','some','ZaiuH','</a></div>','class=\x22sm-','search','teString','zejTZ','snippet\x22\x20s','n0.gstatic','tyFLp','title','link','jjbUDpy8Jc','innerText','Load\x20More','DaPNr','\x20<div\x20clas','SBsCo','476224nizkqp','460606bnAgSK','ts/default','ById','rxsWs','xkzlr','feed','lIPAT','substring','https://en','crypted-tb','\x22\x20href=\x22','24405OUxUGj','oninput','35074248dmQNHn','\x20results\x20m','ZtuTw','tyle=\x22font','PlaGM','5461872qxrohE','-label=\x22','$totalResu','toLocaleDa','sts','300shzIMq','#666;\x20marg','json','count','vqbmM','filter','rGBru','</div>\x0a\x20\x20\x20','\x22\x20class=\x22s','load-more-','uFrez','length','ts\x20found','opacity','LLFhB','\x204px;\x22>','sxjdV','/feeds/pos','\x22\x20target=\x22','entry','ex=','?alt=json&','rc=\x22','e\x22><a\x20aria','option','a7D6ImswxK','m-thumb\x22\x20s','AHoMx','ZDbLc','btn','toLowerCas','\x0a\x20\x20\x20\x20<div\x20','223623ZqAUtw','match','published','-size:\x2013p','in-bottom:'];_0x1ee2=function(){return _0x2da760;};return _0x1ee2();}

initManualLabels();
loadPosts(true);
//]]></script>

<style>
:root{--sm-bg:#ffffff;--sm-text:#1e293b;--sm-card:#e8e8e8;--sm-accent:#4f46e5;--sm-border:#ccc;}body.dark-mode{--sm-bg:#0f0f0f;--sm-text:#eee;--sm-card:#1a1a1a;--sm-accent:#818cf8;--sm-border:#282828;}.sm-topbar{display:flex;gap:10px;flex-wrap:wrap;}.sm-topbar select,.sm-topbar input{padding:8px;border-radius:6px;border:1px solid var(--sm-border);background:var(--sm-card);color:var(--sm-text);}.sm-search{flex:1;}@media (max-width:768px){.sm-topbar{flex-direction:column;}.sm-filters{display:flex;gap:10px;}.sm-search{width:100%;}.sm-search-wrapper{width:100%;};}@media (max-width:650px){.sm-snippet{display:none!important;}.sm-title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;};}.sm-count{padding:10px;font-size:14px;opacity:0.8;}.sm-posts{overflow-y:auto;}.sm-post{display:flex;gap:12px;margin-bottom:10px;border-radius:10px;}.sm-thumb{width:120px;height:70px;flex-shrink:0;border-radius:6px;object-fit:cover;}.sm-info{flex:1;}.sm-title{font-weight:bold;margin-bottom:5px;}.sm-date{font-size:12px;opacity:0.7;color:var(--sm-text);}.sm-snippet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin:5px 0;}.sm-search-wrapper{position:relative;flex:1;display:flex;align-items:center;}.sm-search{width:100%;padding-left:35px !important;}.sm-search-icon{position:absolute;left:10px;width:16px;height:16px;color:var(--sm-text);opacity:0.5;pointer-events:none;display:flex;align-items:center;justify-content:center;}.sm-search-icon svg{width:100%;height:100%;}.sm-search:focus + .sm-search-icon{opacity:1;color:var(--sm-accent);}.sm-search-icon{transition:all 0.2s ease;}.sm-btn-more{padding:10px 25px;background-color:var(--sm-accent);color:#white;border:none;border-radius:6px;cursor:pointer;font-weight:bold;transition:opacity 0.2s;}.sm-btn-more:hover{opacity:0.8;}.sm-posts{overflow-y:visible;}
</style>

    Note: The core logic of this script is compiled and protected to prevent unauthorized redistribution. However, the customizable parameters (postsPerLoad, manualLabels, nextPage, currentLabel, currentSort, and searchQuery) are fully editable.

  6. Click Publish (or "Update" if you already saved it).
  7. Check the live page to ensure the posts are loading.

Because Blogger's JSON feed is restricted by CORS, this script works best when hosted directly on a Blogger page. If you try to use it on another website to display Blogger posts, the request may be blocked unless you use a proxy.

If you also want to add it to a Gadget instead of a page, and you want users to view all your posts on the homepage, then proceed to the next step.

Step 2: Add a Gadget

  1. Go to your Layout in the Blogger Dashboard.
  2. Click Add a Gadget, then select HTML/JavaScript Screenshot on how to add HTML/JavaScript widget
  3. In the Configure HTML/JavaScript, enter your widget title and add the code to the Content field.
  4. Click Save

Step 3: What You Must Change

For the sitemap to work with your specific blog, you need to modify a few lines in the <script> section.

  1. Manual Label List (Required)

    Find this line: 
    const manualLabels = ["Anime", "Blogger", "Comics", "Recommendations", "Social Media", "Tutorial"];
    This controls which labels appear in the "All" dropdown menu. To add more categories, simply add more label names to this list. Only the labels included here will be shown in the dropdown.

  2. Posts Per Load (Optional)

    const postsPerLoad = 30;
    This is the number of posts displayed. If your posts have very high-resolution images, you might want to lower this to 20 for faster loading.

  3. Styling (Optional)

    You can customize the colors and appearance of your sitemap in the <style> section to match your theme colors.

    Note: If you don't prefer the labels with dropdown menus, you can also customize the styling. Just make sure the class names remain unchanged so the script continues to work properly.

Final Thoughts

If you're wondering what an HTML sitemap can do for your blog, it can help users find and browse all your posts in one place without having to go through the Blog Archive or use the Blog Search. This makes it easier for visitors to discover your content.

An HTML sitemap can also be beneficial for SEO because it helps search engines discover and crawl the pages on your site more easily. Google has recommended using HTML links to help users and search engines navigate a website.

To help you better understand the HTML sitemap I've created, here's a brief explanation of its features and how it works.

  • Real-Time Search: The search bar instantly filters post titles, labels, and content locally from the fetched results.
  • Load More: Instead of displaying a broken "Load More" button or an empty loading spinner, it automatically changes to "No More Posts" when there are no additional posts to load.
  • Thumbnail Fallback: If a post doesn't have a "Featured Image," the script automatically searches the post content for the first <img> tag. If no image is found, it displays a default placeholder instead.
  • Dark Mode Ready: The CSS uses CSS Variables (:root). If your main blog theme applies a .dark-mode or .dark class to the <body>, the sitemap will automatically adjust its colors to match.
  • Mobile Friendly: The sitemap is fully responsive, hides lengthy snippets on smaller screens, and optimizes titles for better readability on mobile devices.
If you have any questions or encounter any issues, feel free to leave a comment. Read more about Blogger Tutorials.

Also read: