How to Add an HTML Sitemap in Blogger (4 New Styles)

ByAbhishek padhi Updated on
HTML sitemap for Blogger

Do you want to add an HTML sitemap page on your Blogger website. Well you can do that by following this Article. Here, I will be sharing 4 new styles of HTML sitemap for Blogger.

But before that let’s understand what is an HTML sitemap?

An HTML sitemap is a webpage that provides a list of links to the most important pages or sections on a website, organized in a structured manner. It helps both visitors and search engines easily find and navigate content on the site.

When to Use an HTML Sitemap:

  • For websites with complex structures or many pages.
  • If you want to improve user experience by providing an easy way to find content.
  • For SEO purposes, as an additional aid to help search engines navigate your website.

By using both HTML and XML sitemaps, you enhance your site’s usability for users and ensure proper indexing by search engines.

How to Add the HTML sitemap in Blogger?

To add the HTML sitemap to the Blogger website, You need to Login to your Blogger dashboard and go to the Pages section.

Now create a New page and set the title HTML sitemap or you can keep it as sitemap.

Now you need to copy any one styles of HTML sitemap and paste it on the HTML section of the page.

Now you need to replace the Demo URL with your Website URL and publish the page. Now you have successfully Added the HTML sitemap to your Blogger website.

Style -01 (Plain HTML SItemap)

Plain HTML SItemap for Blogger
<ul id="sitemap"></ul>

    <script type="text/javascript">
        var numposts = 100; // Change this value if you have more than 100 posts
        function showrecentposts(json) {
            var sitemap = document.getElementById("sitemap");
            for (var i = 0; i < json.feed.entry.length; i++) {
                var entry = json.feed.entry[i];
                var posttitle = entry.title.$t;
                var posturl;
                for (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'alternate') {
                        posturl = entry.link[k].href;
                        break;
                    }
                }
                var listItem = document.createElement("li");
                listItem.innerHTML = `<a href="${posturl}">${posttitle}</a>`;
                sitemap.appendChild(listItem);
            }
        }

        var script = document.createElement("script");
        script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
        document.body.appendChild(script);
    </script>
<style>
 #sitemap {
            list-style-type: none;
            padding: 0;
            margin: 0;
            margin: auto;
            background-color: #f8f9fa;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            min-height: 800px; 
            transition: all 0.3s ease; 
        }

        #sitemap li {
            padding: 8px 15px;
            border-bottom: 1px solid #e0e0e0;
            transition: background 0.2s, transform 0.2s;
            transition: background 0.2s;
            border-left: 4px solid black;
          margin-bottom: 4px;
        }
   #sitemap li:hover{
     border-left: 4px solid Blue; transform: translateY(-2px);}

        #sitemap li:last-child {
            border-bottom: none;
        }

        #sitemap a {
            text-decoration: none;
            color: Black;
            font-size: 19px;
            display: block;
          transition: color 0.2s;
        }

        #sitemap a:hover {
            color: blue;
        }
    </style>

Style -02 (HTML SItemap With Labels)

HTML SItemap With Labels
<ul id="sitemap"></ul>

<script type="text/javascript">
    var numposts = 100; // Change this value if you have more than 100 posts
    function showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        for (var i = 0; i < json.feed.entry.length; i++) {
            var entry = json.feed.entry[i];
            var posttitle = entry.title.$t;
            var posturl;
            
            // Extract labels (if available) and create links
            var postlabels = '';
            if (entry.category) {
                postlabels = entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).join(' ');
            } else {
                postlabels = '<span class="no-label">No Label</span>';
            }

            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="post-item">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels}</div>
                </div>`;
            sitemap.appendChild(listItem);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<style>
    #sitemap {
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin: auto;
        background-color: #f8f9fa;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        min-height: 800px;
        transition: all 0.3s ease;
    }

    #sitemap li {
        padding: 8px 15px;
        border-bottom: 1px solid #e0e0e0;
        transition: background 0.2s, transform 0.2s;
        border-left: 4px solid black;
        margin-bottom: 4px;
    }

    #sitemap li:hover {
        border-left: 4px solid Blue;
        transform: translateY(-2px);
    }

    #sitemap li:last-child {
        border-bottom: none;
    }

    .post-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .post-title {
        text-decoration: none;
        color: Black;
        font-size: 19px;
        display: block;
        transition: color 0.2s;
    }

    .post-title:hover {
        color: blue;
    }

    .post-labels {
        display: flex;
        gap: 5px;
    }

    .label-button {
    background-color: #48525c;
    color: #ffffff;
    padding: 0px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    line-height: 25px;
    transition: background-color 0.2s ease;
}

    .label-button:hover {
        background-color: #0056b3;
    }

    .no-label {
        color: #555;
        font-size: 14px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .post-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .post-labels {
            margin-top: 5px;
        }
    }
</style>

Style -03 (HTML SItemap With With Drop down filters)

HTML SItemap With With Drop down filters
<div class="filter-container">
    <label for="labelFilter">Filter by Label: </label>
    <select id="labelFilter" onchange="filterByLabel()">
        <option value="all">All</option>
    </select>
</div>

<ul id="sitemap"></ul>

<script type="text/javascript">
    var allPosts = []; // Store all posts here
    var uniqueLabels = new Set(); // To store unique labels

    // Fetch and display recent posts
    function showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // Store all posts for filtering

        // Generate unique labels for filter
        allPosts.forEach(function(entry) {
            if (entry.category) {
                entry.category.forEach(function(cat) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        // Populate the filter dropdown with labels
        var labelFilter = document.getElementById("labelFilter");
        uniqueLabels.forEach(function(label) {
            var option = document.createElement("option");
            option.value = label;
            option.textContent = label;
            labelFilter.appendChild(option);
        });

        displayPosts(allPosts); // Initially display all posts
    }

    // Function to display filtered posts
    function displayPosts(posts) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // Clear current posts

        posts.forEach(function(entry) {
            var posttitle = entry.title.$t;
            var posturl;
            var postlabels = '';

            if (entry.category) {
                postlabels = entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).join(' ');
            } else {
                postlabels = '<span class="no-label">No Label</span>';
            }

            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="post-item">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels}</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    // Function to filter posts by selected label
    function filterByLabel() {
        var selectedLabel = document.getElementById("labelFilter").value;

        if (selectedLabel === "all") {
            displayPosts(allPosts); // Show all posts if "All" is selected
        } else {
            var filteredPosts = allPosts.filter(function(entry) {
                return entry.category && entry.category.some(cat => cat.term === selectedLabel);
            });
            displayPosts(filteredPosts); // Display only filtered posts
        }
    }

    // Load recent posts with script
    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<style>
    /* Styling for filter dropdown */
    .filter-container {
        margin: 20px 0;
        text-align: center;
    }

    #labelFilter {
        padding: 5px 10px;
        font-size: 16px;
    }

    /* Sitemap and post item styles */
    #sitemap {
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin: auto;
        background-color: #f8f9fa;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        min-height: 800px;
        transition: all 0.3s ease;
    }

    #sitemap li {
        padding: 8px 15px;
        border-bottom: 1px solid #e0e0e0;
        transition: background 0.2s, transform 0.2s;
        border-left: 4px solid black;
        margin-bottom: 4px;
    }

    #sitemap li:hover {
        border-left: 4px solid Blue;
        transform: translateY(-2px);
    }

    #sitemap li:last-child {
        border-bottom: none;
    }

    .post-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .post-title {
        text-decoration: none;
        color: Black;
        font-size: 19px;
        display: block;
        transition: color 0.2s;
    }

    .post-title:hover {
        color: blue;
    }

    .post-labels {
        display: flex;
        gap: 5px;
    }

    .label-button {
        background-color: #48525c;
        color: #ffffff;
        padding: 0px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 14px;
        line-height: 25px;
        transition: background-color 0.2s ease;
    }

    .label-button:hover {
        background-color: #0056b3;
    }

    .no-label {
        color: #555;
        font-size: 14px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .post-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .post-labels {
            margin-top: 5px;
        }
    }
</style>

Style -04 (HTML SItemap With With Pill shape Filters)

HTML SItemap With With Pill shape Filters
<div class="filter-container">
    <button class="filter-button" onclick="filterByLabel('all')">All</button>
    <!--Label buttons will be dynamically inserted here-->
</div>

<ul id="sitemap"></ul>

<script type="text/javascript">
    var allPosts = []; // Store all posts here
    var uniqueLabels = new Set(); // To store unique labels

    function showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // Store all posts for filtering

        allPosts.forEach(function(entry) {
            if (entry.category) {
                entry.category.forEach(function(cat) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        var filterContainer = document.querySelector('.filter-container');
        uniqueLabels.forEach(function(label) {
            var button = document.createElement("button");
            button.className = "filter-button";
            button.textContent = label;
            button.onclick = function() { filterByLabel(label); };
            filterContainer.appendChild(button);
        });

        displayPosts(allPosts); // Display all posts initially
    }

    function displayPosts(posts) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // Clear the sitemap list

        posts.forEach(function(entry) {
            var posttitle = entry.title.$t;
            var posturl;
            var postlabels = '';

            if (entry.category) {
                postlabels = entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).join(' ');
            } else {
                postlabels = '<span class="no-label">No Label</span>';
            }

            for (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="post-item">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels}</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    function filterByLabel(label) {
        if (label === 'all') {
            displayPosts(allPosts);
        } else {
            var filteredPosts = allPosts.filter(function(entry) {
                return entry.category && entry.category.some(cat => cat.term === label);
            });
            displayPosts(filteredPosts);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<style>
    /* Style for the filter container */
    .filter-container {
        text-align: center;
        margin: 20px 0;
    }

    /* Pill-shaped filter buttons */
    .filter-button {
        background-color: #007bff;
        border: none;
        color: white;
        padding: 10px 20px;
        margin: 5px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .filter-button:hover {
        background-color: #0056b3;
    }

    /* Style for the sitemap and post items */
    #sitemap {
        list-style-type: none;
        padding: 0;
        margin: 0;
        margin: auto;
        background-color: #f8f9fa;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        min-height: 800px;
        transition: all 0.3s ease;
    }

    #sitemap li {
        padding: 8px 15px;
        border-bottom: 1px solid #e0e0e0;
        transition: background 0.2s, transform 0.2s;
        border-left: 4px solid black;
        margin-bottom: 4px;
    }

    #sitemap li:hover {
        border-left: 4px solid Blue;
        transform: translateY(-2px);
    }

    #sitemap li:last-child {
        border-bottom: none;
    }

    .post-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .post-title {
        text-decoration: none;
        color: Black;
        font-size: 19px;
        display: block;
        transition: color 0.2s;
    }

    .post-title:hover {
        color: blue;
    }

    .post-labels {
        display: flex;
        gap: 5px;
    }

    .label-button {
        background-color: #48525c;
        color: #ffffff;
        padding: 0px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 14px;
        line-height: 25px;
        transition: background-color 0.2s ease;
    }

    .label-button:hover {
        background-color: #0056b3;
    }

    .no-label {
        color: #555;
        font-size: 14px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .post-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .post-labels {
            margin-top: 5px;
        }
    }
</style>

You can use any one code given above and make sure to change the Website URL on the code. So that it will work on your Blogger website.

If you want More HTML sitemap code for Blogger then check our old Blog post on Techyleaf.

If you still have any doubt, feel free to ask in the comment section. I will be happy to help you in that.

Share this post:

Share on WhatsApp Share on Pinterest Share on Telegram Share on Reddit
Avatar of Abhishek padhi

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I currently share top-notch Tutorials related to Blogging & SEO.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *