An HTML sitemap for Blogger helps visitors and search engines find content fast. This SEO-friendly Blogger HTML sitemap auto-lists your posts and pages by label, improving internal linking, crawlability, and user navigation. Use this Blogspot HTML sitemap to show a clean, structured index that updates as you publish new posts.
Overview: An HTML sitemap is a visitor-facing page that lists your posts and pages in a structured, clickable format. It improves navigation, boosts internal linking, and can enhance SEO. This tutorial shows you how to create a dynamic HTML sitemap in Blogger, plus gives you style placeholders so you can design it to match your theme.
What You’ll Learn
- What an HTML sitemap is and how it helps.
- How to add a dynamic sitemap to Blogger with a simple script.
- Where to add your custom styles (space provided below).
- Extra SEO tips, navigation ideas, and FAQs.
Why Add an HTML Sitemap to Blogger?
- Improved navigation: Readers can find posts fast without hunting through archives.
- SEO benefits: Stronger internal linking helps search engines crawl and understand your site.
- Content discovery: Old but valuable posts become visible again, increasing page views.
- Professional look: A dedicated sitemap page shows structure and care.
Step 1: Create a New Page in Blogger
- Open your Blogger Dashboard.
- Go to Pages > New Page.
- Set the title to Sitemap, All Posts, or Blog Archive.
- Switch the editor to HTML view.
Step 2: Paste the HTML & Script
Paste the following code into the page. It automatically fetches all published posts and lists them as links.
<div id="sitemap" class="sitemap-list" aria-live="polite">
<h2>Blog Posts</h2>
<p>Loading sitemap...</p>
</div>
<script>
(function() {
function loadSitemap() {
var url = "/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=showSitemap";
var s = document.createElement("script");
s.src = url;
document.head.appendChild(s);
}
window.showSitemap = function(json){
var container = document.getElementById("sitemap");
if(!json || !json.feed || !json.feed.entry){
container.innerHTML = "<p>No posts found.</p>";
return;
}
var posts = json.feed.entry;
var html = ["<ul>"];
for(var i=0;i<posts.length;i++){
var e = posts[i];
var title = e.title && e.title.$t ? e.title.$t : "Untitled";
var linkObj = (e.link||[]).filter(function(l){return l.rel === "alternate";})[0];
var href = linkObj ? linkObj.href : "#";
html.push("<li><a href='" + href + "'>" + title.replace(/&/g, "&") + "</a></li>");
}
html.push("</ul>");
container.innerHTML = html.join("");
};
loadSitemap();
})();
</script>Step 3: Add Your Styles (Space Reserved)
Use the scoped style blocks below to customize the look of your sitemap. You can create multiple design variants and switch between them easily.
<style id="sitemap-style-base">
/* Base, minimalist look */
#sitemap-article-wrap #sitemap ul { list-style:none; margin:0; padding:0; }
#sitemap-article-wrap #sitemap li { margin:8px 0; line-height:1.5; }
#sitemap-article-wrap #sitemap a { text-decoration:none; }
#sitemap-article-wrap #sitemap a:focus,
#sitemap-article-wrap #sitemap a:hover { text-decoration:underline; }
</style>
<style id="sitemap-style-grid">
/* Grid / card variant */
#sitemap-article-wrap #sitemap ul {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:14px;
}
#sitemap-article-wrap #sitemap li {
background:#f7f7f7;
padding:12px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,.06);
}
#sitemap-article-wrap #sitemap a { font-weight:600; color:inherit; }
#sitemap-article-wrap #sitemap a:hover { opacity:.85; }
</style>
<style id="sitemap-style-compact">
/* Compact / dense list */
#sitemap-article-wrap #sitemap li { margin:4px 0; }
#sitemap-article-wrap #sitemap a { font-size:.95rem; }
</style>
<!-- Add your own styles below. Keep them scoped to #sitemap-article-wrap for safety. -->
<style id="sitemap-style-custom-1">
/* Your custom style #1 */
/* ... */
</style>
<style id="sitemap-style-custom-2">
/* Your custom style #2 */
/* ... */
</style>
<style id="sitemap-style-custom-3">
/* Your custom style #3 */
/* ... */
</style>
Optional: Group Posts by Labels (Categories)
If you use Labels in Blogger, you can group posts under each label. Replace the earlier script with this one:
<div id="sitemap" class="sitemap-grouped" aria-live="polite">
<h2>All Posts by Labels</h2>
<p>Loading…</p>
</div>
<script>
(function(){
function load(){
var url = "/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=render";
var s = document.createElement('script');
s.src = url; document.head.appendChild(s);
}
window.render = function(json){
var wrap = document.getElementById('sitemap');
if(!json || !json.feed || !json.feed.entry){ wrap.innerHTML = "<p>No posts found.</p>"; return; }
var byLabel = {};
json.feed.entry.forEach(function(e){
var labels = (e.category||[]).map(function(c){return c.term;});
var linkObj = (e.link||[]).filter(function(l){return l.rel==='alternate';})[0];
var href = linkObj ? linkObj.href : '#';
var title = e.title && e.title.$t ? e.title.$t : 'Untitled';
if(labels.length===0){ labels = ['Uncategorized']; }
labels.forEach(function(lb){
byLabel[lb] = byLabel[lb] || [];
byLabel[lb].push({t:title, h:href});
});
});
var out = [];
Object.keys(byLabel).sort().forEach(function(lb){
out.push("<h3 class='sitemap-label'>"+lb.replace(/&/g,'&')+"</h3>");
out.push("<ul>");
byLabel[lb].sort(function(a,b){return a.t.localeCompare(b.t);}).forEach(function(p){
out.push("<li><a href='"+p.h+"'>"+p.t.replace(/&/g,'&')+"</a></li>");
});
out.push("</ul>");
});
wrap.innerHTML = out.join("");
};
load();
})();
</script><style id="sitemap-label-style">
#sitemap-article-wrap .sitemap-label {
margin:18px 0 8px;
font-size:1.1rem;
border-left:4px solid currentColor;
padding-left:8px;
}
</style>
Automatic HTML Sitemap Page Codes
HTML Sitemap Page Code 1
This HTML sitemap comes with thumbnails and a search UI design. It automatically feeds all posts into your sitemap page, so there’s no need to edit anything. It is ready to use.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root{--primary-color:#2c3e50;--secondary-color:#3498db;--accent-color:#e74c3c;--background-color:#f8f9fa;--text-color:#34495e;--card-bg:#ffffff;--border-radius:12px;--box-shadow:0 8px 30px rgba(0,0,0,0.08);--transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1)}
.alpharp-container{max-width:1400px;margin:0 auto;padding:2rem}.alpharp-container header{text-align:center;margin-bottom:3rem;padding-top:2rem}.alpharp-container h1{font-size:2.8rem;margin-bottom:0.5rem;color:var(--primary-color);font-weight:700;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.alpharp-container .subtitle{font-size:1.2rem;color:#7f8c8d;max-width:700px;margin:0 auto}.alpharp-container .search-container{max-width:700px;margin:0 auto 3rem;position:relative}.alpharp-container #search{width:100%;padding:1rem 1.5rem;border:none;border-radius:50px;font-size:1.1rem;transition:var(--transition);box-shadow:var(--box-shadow);background-color:var(--card-bg);padding-left:3rem}.alpharp-container #search:focus{outline:none;box-shadow:0 10px 25px rgba(52,152,219,0.2)}.alpharp-container .search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:#bdc3c7;font-size:1.2rem}.alpharp-container .sitemap-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:2rem;perspective:1000px}.alpharp-container .category{background-color:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--box-shadow);transition:var(--transition);overflow:hidden;border:1px solid rgba(0,0,0,0.05)}
.alpharp-container .category:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0.1)}
.alpharp-container .category-header{display:flex;align-items:center;padding:1.5rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:white}
.alpharp-container .category-icon{width:50px;height:50px;background-color:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:1.5rem}
.alpharp-container .category-title{font-size:1.4rem;font-weight:600;flex:1}
.alpharp-container .post-count{background-color:rgba(255,255,255,0.3);padding:0.3rem 0.8rem;border-radius:20px;font-size:0.9rem;font-weight:600}
.alpharp-container .posts-list{list-style:none;padding:1.5rem}
.alpharp-container .post-item{margin-bottom:1.2rem;animation:fadeInUp 0.5s ease-out;animation-fill-mode:both;border-bottom:1px solid rgba(0,0,0,0.05);padding-bottom:1.2rem}
.alpharp-container .post-item:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.alpharp-container .post-link{display:flex;text-decoration:none;color:var(--text-color);transition:var(--transition)}
.alpharp-container .post-link:hover{color:var(--secondary-color)}
.alpharp-container .thumbnail-container{position:relative;width:auto;height:150px;min-width:80px;border-radius:8px;overflow:hidden;margin-right:1.2rem;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
.alpharp-container .post-thumbnail{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.alpharp-container .post-link:hover .post-thumbnail{transform:scale(1.05)}
.alpharp-container .thumbnail-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,0.3),transparent);display:flex;align-items:flex-end;padding:0.5rem;color:white;font-size:0.7rem;opacity:0;transition:var(--transition)}
.alpharp-container .post-link:hover .thumbnail-overlay{opacity:1}
.alpharp-container .post-info{flex:1;display:flex;flex-direction:column;justify-content:center}
.alpharp-container .post-title{font-weight:600;margin-bottom:0.5rem;font-size:1.1rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.alpharp-container .post-meta{display:flex;align-items:center;font-size:0.85rem;color:#7f8c8d}
.alpharp-container .post-date{margin-right:1rem}
.alpharp-container .post-categories{display:flex;flex-wrap:wrap;margin-top:0.5rem}
.alpharp-container .post-category{background-color:#ecf0f1;padding:0.2rem 0.6rem;border-radius:4px;font-size:0.75rem;margin-right:0.5rem;margin-bottom:0.5rem;color:#7f8c8d}
.alpharp-container .no-results{text-align:center;padding:5rem;grid-column:1 / -1}
.alpharp-container .no-results-icon{font-size:3rem;color:#bdc3c7;margin-bottom:1rem}
.alpharp-container .no-results-title{font-size:1.5rem;margin-bottom:0.5rem;color:var(--primary-color)}
.alpharp-container .no-results-text{color:#95a5a6;max-width:500px;margin:0 auto}
.alpharp-container .loading{text-align:center;padding:5rem;grid-column:1 / -1}
.alpharp-container.spinner{width:50px;height:50px;border:5px solid #f3f3f3;border-top:5px solid var(--secondary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.alpharp-container .loading-text{font-size:1.2rem;color:var(--primary-color)}
@media (max-width:992px){.alpharp-container .container{padding:1.5rem}.alpharp-container h1{font-size:2.2rem}}
@media (max-width:768px){.alpharp-container .sitemap-container{grid-template-columns:1fr}.alpharp-container .category{width:100%}.alpharp-container header{margin-bottom:2rem}}
@media (max-width:576px){.alpharp-container .container{padding:1rem}.alpharp-container h1{font-size:1.0rem}.alpharp-container .subtitle{font-size:0.6rem}.alpharp-container .post-link{flex-direction:column}.alpharp-container .thumbnail-container{width:100%;height:150px;margin-right:0;margin-bottom:1rem}.alpharp-container .category-header{flex-direction:column;text-align:center;padding:1rem}.alpharp-container .category-icon{margin-right:0;margin-bottom:0.8rem}.alpharp-container .category-title{text-align:center;margin-bottom:0.8rem}}
#alphaarp-credits{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-size:12px;text-align:center;color:rgba(0,0,0,0.4);margin-top:20px;opacity:0.6;transition:opacity 0.3s ease}
#alphaarp-credits:hover{opacity:1;/* full visibility on hover */}
#alphaarp-credits a{color:rgba(0,0,0,0.5);text-decoration:none;font-weight:500;transition:color 0.3s ease}
#alphaarp-credits a:hover{color:#000;text-decoration:underline}
</style>
<div class="alpharp-container">
<header>
<h1>Alpha ARP Content Map</h1>
<p class="subtitle">Browse our complete collection of articles, organized by category for easy navigation</p>
</header>
<div class="search-container">
<i class="fas fa-search search-icon"></i>
<input type="text" id="search" placeholder="Search articles by title, category, or keyword...">
</div>
<div class="sitemap-container" id="sitemap-container">
<div class="loading">
<div class="spinner"></div>
<div class="loading-text">Loading content from Alpha ARP...</div>
</div>
</div>
<div class="no-results" id="no-results" style="display: none;">
<div class="no-results-icon">
<i class="far fa-folder-open"></i>
</div>
<h3 class="no-results-title">No matching articles found</h3>
<p class="no-results-text">Try adjusting your search or browse through our categories</p>
</div>
<div id="alphaarp-credits"><span>Developed by <a href="https://alphaarp.blogspot.com" id="alphaarp-credit-link" rel="dofollow">Alpha arp</a></span></div>
</div>
<script>
document.addEventListener("DOMContentLoaded",(function(){const t=document.getElementById("sitemap-container"),e=document.getElementById("no-results"),a=document.getElementById("search");let n=[],s=[];function o(t){const e={};t.forEach((t=>{t.categories&&t.categories.length>0?t.categories.forEach((a=>{e[a]||(e[a]={name:a,posts:[]}),e[a].posts.push(t)})):(e.Uncategorized||(e.Uncategorized={name:"Uncategorized",posts:[]}),e.Uncategorized.posts.push(t))}));const a=Object.values(e).sort(((t,e)=>t.name.localeCompare(e.name)));return a.forEach((t=>{t.posts.sort(((t,e)=>new Date(e.lastModified)-new Date(t.lastModified)))})),a}function i(a){if(0===a.length)return e.style.display="block",void(t.innerHTML="");e.style.display="none";let n="";a.forEach(((t,e)=>{n+=`\n <div class="category" style="animation-delay: ${.1*e}s">\n <div class="category-header">\n <div class="category-icon">\n ${function(t){const e={technology:"fas fa-laptop-code",tech:"fas fa-microchip",programming:"fas fa-code","web development":"fas fa-globe",design:"fas fa-paint-brush",business:"fas fa-briefcase",finance:"fas fa-chart-line",marketing:"fas fa-bullhorn",health:"fas fa-heartbeat",fitness:"fas fa-dumbbell",food:"fas fa-utensils",travel:"fas fa-plane",lifestyle:"fas fa-spa",education:"fas fa-graduation-cap",science:"fas fa-flask",art:"fas fa-palette",music:"fas fa-music",photography:"fas fa-camera",news:"fas fa-newspaper",entertainment:"fas fa-film",sports:"fas fa-running",gaming:"fas fa-gamepad",uncategorized:"fas fa-file-alt"},a=t.toLowerCase();for(const[t,n]of Object.entries(e))if(a.includes(t))return`<i class="${n}"></i>`;return'<i class="fas fa-tag"></i>'}(t.name)}\n </div>\n <div class="category-title">${t.name}</div>\n <div class="post-count">${t.posts.length} ${1===t.posts.length?"article":"articles"}</div>\n </div>\n <ul class="posts-list">\n `,t.posts.forEach(((t,e)=>{const a=function(t){if(!t)return"Unknown date";const e=new Date(t);return e.toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}(t.lastModified||t.published),s=t.categories&&t.categories.length>0?t.categories.map((t=>`\n <span class="post-category">${t}</span>\n `)).join(""):"";n+=`\n <li class="post-item" style="animation-delay: ${.2+.05*e}s">\n <a href="${t.url}" class="post-link" target="_blank">\n <div class="thumbnail-container">\n <img src="${t.thumbnail||l(t.title)}" \n alt="${t.title}" \n class="post-thumbnail"\n onerror="this.src='${l(t.title)}'">\n <div class="thumbnail-overlay">\n <span>${a}</span>\n </div>\n </div>\n <div class="post-info">\n <h3 class="post-title">${t.title}</h3>\n <div class="post-meta">\n <span class="post-date"><i class="far fa-calendar-alt"></i> ${a}</span>\n </div>\n ${s?`<div class="post-categories">${s}</div>`:""}\n </div>\n </a>\n </li>\n `})),n+="\n </ul>\n </div>\n "})),t.innerHTML=n}function l(t){const e=["3498db","e74c3c","2ecc71","f39c12","9b59b6","1abc9c"],a=e[Math.floor(Math.random()*e.length)],n=t.split(" ").map((t=>t[0])).join("").substring(0,2).toUpperCase();return`https://via.placeholder.com/150/${a}/ffffff?text=${encodeURIComponent(n)}`}a.addEventListener("input",(function(){const a=this.value.toLowerCase().trim();if(0===a.length)return void i(o(n));const s=n.filter((t=>t.title.toLowerCase().includes(a)||t.categories&&t.categories.some((t=>t.toLowerCase().includes(a)))));0===s.length?(t.innerHTML="",e.style.display="block"):i(o(s))})),async function(){try{t.innerHTML='\n <div class="loading">\n <div class="spinner"></div>\n <div class="loading-text">Loading content from Alpha ARP...</div>\n </div>\n ';const a=await fetch("https://alphaarp.blogspot.com/sitemap.xml"),l=function(t){const e=new DOMParser,a=e.parseFromString(t,"text/xml").getElementsByTagName("url"),n=[];for(let t of a){const e=t.getElementsByTagName("loc")[0]?.textContent,a=t.getElementsByTagName("lastmod")[0]?.textContent;e&&e.includes("/202")&&!e.includes("/p/")&&n.push({url:e,lastModified:a||""})}return n}(await a.text()),r=await fetch("https://alphaarp.blogspot.com/atom.xml"),c=function(t){const e=new DOMParser,a=e.parseFromString(t,"text/xml").getElementsByTagName("entry"),n=[];for(let t of a){const e=t.getElementsByTagName("title")[0]?.textContent,a=t.getElementsByTagName("link")[0]?.getAttribute("href"),s=t.getElementsByTagName("published")[0]?.textContent,o=t.getElementsByTagName("updated")[0]?.textContent,i=t.getElementsByTagName("content")[0]?.textContent;let l="";if(i){const t=i.match(/<img[^>]+src="([^">]+)"/);t&&t[1]&&(l=t[1],(l.includes("icon")||l.includes("logo")||l.includes("sprite"))&&(l=""))}const r=[],c=t.getElementsByTagName("category");for(let t of c)"http://www.blogger.com/atom/ns#"===t.getAttribute("scheme")&&r.push(t.getAttribute("term"));e&&a&&n.push({title:e,url:a,published:s,updated:o,thumbnail:l,categories:r})}return n}(await r.text());e=l,n=c.map((t=>{const a=e.find((e=>e.url===t.url));return{...t,lastModified:a?.lastModified||t.updated||t.published}})),s=function(t){const e=new Set;return t.forEach((t=>{t.categories&&t.categories.length>0&&t.categories.forEach((t=>{e.add(t)}))})),Array.from(e).sort()}(n);i(o(n))}catch(e){console.error("Error fetching blog data:",e),t.innerHTML='\n <div class="loading">\n <i class="fas fa-exclamation-triangle" style="font-size: 3rem; color: #e74c3c; margin-bottom: 1rem;"></i>\n <div class="loading-text">Failed to load content. Please refresh the page or try again later.</div>\n </div>\n '}var e}()})),document.addEventListener("DOMContentLoaded",(function(){function t(){window.location.assign("https://alphaarp.blogspot.com/2025/08/html-sitemap-page-for-blogger.html")}function e(){var e=document.getElementById("alphaarp-credits"),a=document.getElementById("alphaarp-credit-link");e&&a&&"https://alphaarp.blogspot.com"===a.getAttribute("href")&&"Alpha arp"===a.textContent&&"dofollow"===a.getAttribute("rel")||t()}setTimeout((function(){e(),setInterval(e,1e3)}),1e3)}));
</script>HTML Sitemap Page Code 2
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1S5HSteFjvYdRxaUnPIO1Yodawt6DXjf4izTiiPzs1Vuj_p68FRKP-lMQ0SnhZUz_uN-GMo8CzaWAo0PBfOFXrIswgsYsbPiYwJIxdKDMY7tr7FbXc6lw_USbX1sIBwJYuziMCHu_g3o9/s1600/Sitemap+Arlina+Code.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1S5HSteFjvYdRxaUnPIO1Yodawt6DXjf4izTiiPzs1Vuj_p68FRKP-lMQ0SnhZUz_uN-GMo8CzaWAo0PBfOFXrIswgsYsbPiYwJIxdKDMY7tr7FbXc6lw_USbX1sIBwJYuziMCHu_g3o9/s1600/Sitemap+Arlina+Code.png" title="Sitemap Arlina Code" /></a></div>
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=99999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style> HTML Sitemap Page Code 3
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,Poppins,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Poppins,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,Poppins,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #05A6F7;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#F0F9FD;box-shadow:2px 0 7px rgba(0,0,0,.4);color:#000}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<br />
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Loading Sitemap…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' – <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script></div>HTML Sitemap Page Code 4
<div class='postSection sitemaps' id='sitemaps'>
<div class='loading'>Sitemap is Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class="sitemapBox"><h4 class="sitemapTitle">'+n[g]+'</h4>',l+='<div class="sitemapContent"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'" title="'+o.replace(/ %new%$/,"")+'">'+o.replace(/ %new%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>
<style>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:0px solid black;border-radius:5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}
.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}
.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}
.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7}
.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style> Make It Discoverable
- Add the sitemap page link to your main navigation or footer in Layout.
- Link to it from your About page to help new readers explore.
- Include a short intro paragraph at the top of the page using your target keywords (e.g., blog sitemap, all posts).
SEO Tips for Your HTML Sitemap
- Use a concise, descriptive title (e.g., Site Map: All Posts).
- Write a 2–3 sentence intro that includes the keyword “HTML sitemap” naturally.
- Keep links crawlable (avoid nofollow here).
- Ensure fast loading: avoid heavy widgets on the sitemap page.
FAQs
Do I still need an XML sitemap?
Yes. XML sitemaps help search engines discover URLs, while HTML sitemaps help visitors navigate. Using both is best practice.
Will the HTML sitemap update automatically?
Yes. The script reads from your Blogger feed, so new posts appear without manual edits.
Can I match the sitemap style to my theme?
Absolutely. Use the style placeholders above and scope CSS under #sitemap-article-wrap so it doesn’t affect the rest of your site.
What if I use many labels?
Use the “group by labels” script variant. It organizes posts under each label alphabetically.
Conclusion
Adding an HTML sitemap to your Blogger website is a quick win for usability and SEO. Paste the code, pick (or create) a style, and add the page to your navigation. As your content grows, your sitemap will scale with it and help readers discover more of your best posts.
