Skip to main content

Add Simple Auto Updated HTML Sitemap In Blogger Blog

How To Add Simple Auto Updated HTML Sitemap In Blogger Blog :

  • First of all log in to Blogger. 
  • Then click on Page in blog Dashboard.
  • Now write Sitemap in Title and copy and paste the given code in content.

<style>
.simple-sitemap a {
  color: #1a0dab;
  text-decoration: none;
  font-size: 16px;
  display: block;
  margin: 6px 0;
}
.simple-sitemap a:hover {
  text-decoration: underline;
}
</style>
<div class="simple-sitemap" id="simple-sitemap">⏳ Sitemap is loading, please wait...</div>
<script>
fetch('/feeds/posts/summary?alt=json&max-results=999')
  .then(res => res.json())
  .then(data => {
    let posts = data.feed.entry;
    let html = '';
    posts.forEach((post, index) => {
      let title = post.title.$t;
      let url = post.link.find(l => l.rel === 'alternate').href;
      html += `<a href="${url}" target="_blank">✍️ ${title}</a>`;
    });
    document.getElementById('simple-sitemap').innerHTML = html;
  });
</script>

Now at last publish the page. Then go to layout and add the page. Now Stylish Label Wise HTML Sitemap will be added to your blog automatically.

Comments