How To Add Stylish Label Wise HTML Sitemap In Blogger Blog? (Auto Updated Code)

How To Add Stylish Label Wise HTML Sitemap In Blogger Blog? (Auto Updated Code) : 

• 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>

.sitemap-container {

  font-family: "Segoe UI", sans-serif;

  max-width: 850px;

  margin: auto;

  padding: 15px;

}

.sitemap-container h2 {

  text-align: center;

  color: #e91e63;

  font-size: 28px;

  margin-bottom: 30px;

  border-bottom: 2px dashed #e91e63;

  display: inline-block;

  padding-bottom: 5px;

}

.label-heading {

  font-size: 21px;

  color: #444;

  margin-top: 30px;

  margin-bottom: 12px;

  border-left: 5px solid #e91e63;

  padding-left: 10px;

  background: #fef6f8;

  font-weight: 600;

}

.sitemap-container ul {

  margin-left: 20px;

  margin-bottom: 20px;

}

.sitemap-container li {

  margin-bottom: 6px;

  list-style: none;

  position: relative;

  padding-left: 26px;

}

.sitemap-container li::before {

  content: "📝";

  position: absolute;

  left: 0;

  color: #e91e63;

  font-size: 16px;

}

.sitemap-container a {

  color: #1a0dab;

  text-decoration: none;

  font-weight: normal;

}

.sitemap-container a:hover {

  text-decoration: underline;

  color: #c2185b;

}

</style>

<div class="sitemap-container">

  <h2>📘 ब्लॉग साइटमैप</h2>

  <div id="label-wise-sitemap">Loading...</div>

</div>

<script>

function loadSitemap() {

  const script = document.createElement('script');

  script.src = '/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=renderSitemap';

  document.body.appendChild(script);

}

function renderSitemap(json) {

  const entries = json.feed.entry || [];

  const labels = {};

  entries.forEach(entry => {

    const title = entry.title.$t;

    const link = entry.link.find(l => l.rel === 'alternate').href;

    const entryLabels = entry.category ? entry.category.map(c => c.term) : ['Uncategorized'];

    entryLabels.forEach(label => {

      if (!labels[label]) labels[label] = [];

      labels[label].push({ title, link });

    });

  });

  let html = '';

  Object.keys(labels).sort().forEach(label => {

    html += `<div><div class="label-heading">📁 ${label}</div><ul>`;

    labels[label].forEach(post => {

      html += `<li><a href="${post.link}" target="_blank">${post.title}</a></li>`;

    });

    html += `</ul></div>`;

  });

  document.getElementById('label-wise-sitemap').innerHTML = html;

}

loadSitemap();

</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.