Really Simple Sitemap Blogger Page

Posted by YZG | YzTheme Addson at February 27, 2025

0

"Simplify content discovery with this sleek sitemap. Lightweight design ensures fast loading. Perfect for bloggers & creators!"

Details

"Discover All Our Content in One Place with This Simple Sitemap!"

This sleek and user-friendly sitemap page organizes all your article posts into clear categories based on their labels. Designed for maximum efficiency, it works seamlessly with YzTheme and other templates, ensuring compatibility without compromising performance.

Code

CSS

h2 { font-size: large; }
.post-body li { margin: 0 !important; }

HTML

<div id="sitemap" style="margin: 1rem auto; max-height: 100vh; overflow: auto; padding: 1rem 0; text-align: start; width: 100%;"></div>

JavaScript

let posts=[];const sitemapContainer=document.getElementById("sitemap");function loadFeed(){const e=document.createElement("script");e.src="/feeds/posts/summary?max-results=999&alt=json-in-script&callback=handleFeed",document.body.appendChild(e)}function displaySitemap(){let e="";posts.forEach((t=>{e!==t.labels[0]&&(e=t.labels[0],sitemapContainer.innerHTML+=`<h2><a href="/search/label/${e}">${e}</a></h2>`),sitemapContainer.innerHTML+=`<li><a href="${t.url}">${t.title}</a></li>`}))}window.handleFeed=function(e){e.feed.entry&&(e.feed.entry.forEach((e=>{const t=e.title.$t,l=e.link.find((e=>"alternate"===e.rel))?.href||"#",a=e.published.$t.substring(0,10),s=e.category?.map((e=>e.term))||[];posts.push({title:t,url:l,date:a,labels:s})})),posts.sort(((e,t)=>e.labels[0]===t.labels[0]?e.title.localeCompare(t.title):e.labels[0].localeCompare(t.labels[0]))),displaySitemap())},loadFeed();