How to Create a Blogger Sitemap Page for Posts & Pages

The sitemap plays a good role in improving user experience and site navigation. Sitemap is a page that allows visitors to easily navigate to the pages or posts that they were searching on your website. Additionally, it improve the SEO of your website by helping search engines to index your website's posts and pages more effectively.

When it come to Blogger, having a sitemap enhances the user experience of your blog and also add a professional touch to your blog. Sitemap is a essential page for any blog type. A well made sitemap helps to keep your blog organized and user-friendly that benefits both visitors and search engines.

In this tutorial we will guide you through every step to create a sitemap page. By following this tutorial carefully you can create a sitemap page with posts and pages easily. So without wasting much time let's check how to create this sitemap page in your Blogger blog.

How to create sitemap page with posts and pages?

1. First of all, go to your Blogger dashboard
2. Click on "Pages" option in the sidebar
3. Create a page
4. Name it as "Sitemap"
5. Switch to "HTML view"
6. Paste the following code

<style>
/* Sitemap Page CSS | www.incrediblegad.in */
.switchSelector {margin: 20px 0; position: relative;}
.custom-select-wrapper {position: relative;}
#contentSelector {
  background: none; 
  width: 100%; 
  padding: 10px 40px 10px 10px; 
  font-size: 16px; 
  color: inherit; 
  border: 1px solid #efefef; 
  border-radius: 5px; 
  cursor: pointer; 
  appearance: none;
}
</style>

<!-- Sitemap page | incrediblegad.in -->
<div class="switchSelector">
  <div class="custom-select-wrapper">
    <select id="contentSelector" onchange="loadContent(this.value)">
      <option value="posts">Posts</option>
      <option value="pages">Pages</option>
    </select>
    <span class="chevron-icon">
      <svg viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67" />
      </svg>
    </span>
  </div>
</div>

<script>
/* ----
  Sitemap with Posts and Pages
  Created by: IncredibleGad
  Source code: https://www.incrediblegad.in/2025/02/sitemap-page-with-posts-and-pages.html
---- */
function loadSitemap(data, type) {
  const entries = data.feed.entry || [];
  const categories = {};
  if (!entries || entries.length === 0) {
    document.querySelector('#sitemaps').innerHTML = '<p>No ' + type + ' found.</p>';
    return;
  }
  entries.forEach(entry => {
    const title = entry.title.$t;
    const link = entry.link.find(l => l.rel === 'alternate').href;
    const entryCategories = entry.category ? entry.category.map(cat => cat.term) : ['N/A'];
    entryCategories.forEach(category => {
      if (!categories[category]) categories[category] = [];
      categories[category].push({ title, link });
    });
  });
  displaySitemap(categories);
}

function displaySitemap(categories) {
  let sitemapHTML = '';
  Object.keys(categories).sort().forEach(category => {
    sitemapHTML += `<div class="sitemapBox"><h4 class="sitemapTitle">${category}</h4><div class="sitemapContent"><ol>`;
    categories[category].forEach(post => {
      sitemapHTML += `<li><a href="${post.link}" title="${post.title}">${post.title}</a></li>`;
    });
    sitemapHTML += `</ol></div></div>`;
  });
  document.getElementById('sitemaps').innerHTML = sitemapHTML;
}

function loadContent(type) {
  document.querySelector('#sitemaps').innerHTML = '<div class="loading-spinner" style="display: flex; align-items: center; justify-content: center; height: 100px;"><div style="width: 40px; height: 40px; border: 2px solid rgba(0, 0, 0, 0.1); border-top: 2px solid #0d6efd!important; border-radius: 50%; animation: spin 1s linear infinite;"></div><style>@keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}</style></div>';
  const scriptUrl = type === 'posts' 
    ? 'https://your-blog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadSitemap'
    : 'https://your-blog.blogspot.com/feeds/pages/summary?alt=json-in-script&max-results=500&callback=loadSitemap';
  var script = document.createElement('script');
  script.src = scriptUrl;
  document.body.appendChild(script);
}

(function() { loadContent('posts'); })();
</script>

7. Replace https://your-blog.blogspot.com with your blog URL (There are 2)
8. Publish it

How it works?

It create a sitemap page that shows automatically the categorized posts and pages in your blog with the help of feeds. There is a switcher that helps visitors to switch between posts and pages. We also added a before loader to avoid a blank screen while loading the page.

Conclusion

By creating a sitemap page you can improves your website's user experience and navigation. In this guide we covered how to create a sitemap page that displays both posts and pages. The drop-down selector given in this sitemap page helps visitors to switch between posts and pages easily which helps you to improve your website accessibility and user experience.

Utilizing Blogger's JSON feed allows your sitemap page to stay updated automatically. This helps to exclude the need for manual changes and ensures that visitors can always find the most recent content on your blog. It not only enhances the navigation of your site but also improve SEO of your website.

After following this guide carefully, you can ensure a fully working sitemap page on your Blogger website. If you have any doubt related to this guide then please feel free to comment down below. Don't forget to share with your friends who are looking for a tutorial to create sitemap page that displays both posts and pages.

Thanks for spending time to read this article. Have a nice day!