How to Create a Dynamic Sitemap Using JavaScript for Blogger

In this blog post, I’m sharing a simple yet powerful way to create a dynamic HTML sitemap for Blogger blogs like filesishare. This sitemap automatically loads your latest posts using the Blogger JSON feed and organizes them neatly by category/label.

✅ Features:

Automatically fetches up to 500 posts from your blog
Posts are grouped by label (category)
Accordion-style layout for easy browsing
Built-in search bar to quickly filter post titles
Clean, responsive design that’s easy to customize

The best part? It’s powered entirely by JavaScript — no plugins or manual updates required. It’s perfect for Blogger users who want a searchable and organized sitemap to help visitors navigate their content more easily.

Check out the live version here: Filesishare Blogspot

If you want to use this on your own blog, just copy the code and paste it into a new Page in your Blogger dashboard. That’s it — simple and effective!

Paste this into a new page on your Blogspot using the HTML view:
Note: You will change everything highlighted in red according to your website name.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sitemap - Your Title</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;
      outline: none;
      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>Your Site Sitemap (By Category)</h1>
  <input type="text" id="search" placeholder="Search post titles...">
  <div id="sitemap">Loading posts...</div>

  <script>
    const blogURL = 'https://yoursite.blogspot.com';
    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 functionality
        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 functionality
        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>