How to Create a Dynamic Sitemap Using JavaScript for Blogger
In this tutorial, you’ll learn how to create a dynamic HTML sitemap for your Blogger website. This sitemap automatically fetches your latest posts using the Blogger JSON feed and neatly organizes them by category/label.
✅ Features
- Automatically fetches up to 500 posts from your blog
- Groups posts by label (category)
- Accordion-style layout for easy browsing
- Built-in search bar for quick post filtering
- Clean, responsive design that’s easy to customize
The best part? It’s powered entirely by JavaScript — no plugins or manual updates required. This dynamic sitemap is perfect for Blogger users who want a searchable and organized content list that helps visitors find posts faster.
To use this on your blog, just copy the code below and paste it into a new Page in your Blogger dashboard (use the HTML view). Replace the highlighted parts in red with your own site details.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sitemap - <span style="color:red;">Your Title</span></title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 1000px;
margin: auto;
background: #f4f4f4;
}
h1 { text-align: center; color: #222; }
input[type="text"] {
width: 100%;
padding: 10px;
margin: 20px 0;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 6px;
}
.accordion {
background-color: #0073e6;
color: white;
cursor: pointer;
padding: 14px 20px;
width: 100%;
text-align: left;
font-size: 18px;
border: none;
border-radius: 6px;
margin-top: 10px;
}
.accordion.active, .accordion:hover {
background-color: #005bb5;
}
.panel {
padding: 0 20px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 6px 6px;
}
ul { list-style: none; padding: 10px 0; margin: 0; }
li { padding: 6px 0; border-bottom: 1px dashed #ccc; }
a { color: #333; text-decoration: none; }
a:hover { color: #0073e6; }
small { color: #888; font-size: 13px; }
</style>
</head>
<body>
<h1><span style="color:red;">Your Site Sitemap (By Category)</span></h1>
<input type="text" id="search" placeholder="Search post titles...">
<div id="sitemap">Loading posts...</div>
<script>
const blogURL = '<span style="color:red;">https://yoursite.blogspot.com</span>';
const maxPosts = 500;
fetch(`${blogURL}/feeds/posts/default?alt=json&max-results=${maxPosts}`)
.then(res => res.json())
.then(data => {
const entries = data.feed.entry || [];
const postsByLabel = {};
entries.forEach(post => {
const title = post.title.$t;
const link = post.link.find(l => l.rel === 'alternate').href;
const date = new Date(post.published.$t).toLocaleDateString('en-US', {
year: 'numeric', month: 'long', day: 'numeric'
});
const labels = post.category ? post.category.map(c => c.term) : ['Unlabeled'];
labels.forEach(label => {
if (!postsByLabel[label]) postsByLabel[label] = [];
postsByLabel[label].push({ title, link, date });
});
});
let output = '';
const sortedLabels = Object.keys(postsByLabel).sort();
sortedLabels.forEach(label => {
output += `
<button class="accordion">${label}</button>
<div class="panel"><ul>
${postsByLabel[label].map(post => `
<li><a href="${post.link}" target="_blank">${post.title}</a>
<small>(${post.date})</small></li>
`).join('')}
</ul></div>
`;
});
document.getElementById('sitemap').innerHTML = output;
// Accordion
const acc = document.getElementsByClassName("accordion");
for (let i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
const panel = this.nextElementSibling;
panel.style.maxHeight = panel.style.maxHeight ? null : panel.scrollHeight + "px";
});
}
// Search Filter
document.getElementById('search').addEventListener('input', function () {
const query = this.value.toLowerCase();
const items = document.querySelectorAll('.panel ul li');
items.forEach(li => {
const text = li.textContent.toLowerCase();
li.style.display = text.includes(query) ? '' : 'none';
});
});
})
.catch(err => {
console.error(err);
document.getElementById('sitemap').innerHTML = 'Failed to load sitemap.';
});
</script>
</body>
</html>
