Creating an HTML sitemap for your Blogger website is a valuable step toward improving your site’s navigation and SEO. An HTML sitemap lists all your blog posts and pages in one place, making it easier for visitors and search engines to find and understand your content. In this guide, we’ll cover four new styles you can use to add an HTML sitemap to Blogger, with step-by-step instructions to customize your sitemap and make it appealing.
What is an HTML Sitemap?
An HTML sitemap is a webpage listing all posts and pages on your website. Unlike XML sitemaps, which are structured for search engines, HTML sitemaps are designed to help users navigate your content more easily. They’re particularly useful on Blogger sites where built-in navigation can be limited.
Benefits of an HTML Sitemap
- Improved User Navigation: It helps visitors find what they’re looking for quickly.
- Better SEO: Search engines crawl sitemaps, making it easier to index your pages.
- Boosted User Engagement: A well-organized site encourages visitors to explore more.
- How to Add an HTML Sitemap in Blogger: 4 Styles
Here’s a step-by-step guide on how to add an HTML sitemap to Blogger using four different styles. Each style provides a unique layout and can be customized to match your blog’s aesthetic.
1. Simple List Style
This is the most basic style, presenting your posts in a straightforward list format. It's clean, minimalist, and loads quickly.
Steps:
- Go to your Blogger Dashboard and select your blog.
- Navigate to Pages and click on New Page.
- In the HTML view, paste the following code:
<div class="sitemap">
<h2>Blog Sitemap</h2>
<ul>
<script>
var postTitle = "";
var postUrl = "";
var feed = "/feeds/posts/default?max-results=500";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
var x = xmlDoc.getElementsByTagName("entry");
for (i = 0; i < x.length; i++) {
postTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
postUrl = x[i].getElementsByTagName("link")[0].getAttribute("href");
document.write("<li><a href='" + postUrl + "'>" + postTitle + "</a></li>");
}
}
};
xmlhttp.open("GET", feed, true);
xmlhttp.send();
</script>
</ul>
</div>
- Customize the title and save the page as “Sitemap.”
- Publish the page, and it will automatically display all posts in a list format.
2. Grid Style Sitemap
The Grid Style is visually appealing and presents your posts in a grid layout. This is ideal for blogs with image-focused content.
Steps:
- Follow the same steps as above to create a new page and paste the following code:
<div class="sitemap-grid">
<style>
.sitemap-grid { display: flex; flex-wrap: wrap; }
.sitemap-grid a { width: 30%; margin: 5px; padding: 10px; background-color: #f5f5f5; border-radius: 5px; text-decoration: none; color: #333; }
</style>
<script>
var postTitle = "";
var postUrl = "";
var feed = "/feeds/posts/default?max-results=500";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
var x = xmlDoc.getElementsByTagName("entry");
for (i = 0; i < x.length; i++) {
postTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
postUrl = x[i].getElementsByTagName("link")[0].getAttribute("href");
document.write("<a href='" + postUrl + "'>" + postTitle + "</a>");
}
}
};
xmlhttp.open("GET", feed, true);
xmlhttp.send();
</script>
</div>
- Modify the style as needed by changing background colors, font sizes, or layout width.
- Save and publish the page to see your posts displayed in a grid layout.
3. Accordion Style
The Accordion Style sitemap is a collapsible design, great for blogs with numerous posts in different categories.
Steps:
- Copy and paste the following HTML and JavaScript code:
<div class="accordion-sitemap">
<style>
.accordion { background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; cursor: pointer; }
.panel { display: none; padding: 0 10px; }
</style>
<script>
var postTitle = "";
var postUrl = "";
var feed = "/feeds/posts/default?max-results=500";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
var x = xmlDoc.getElementsByTagName("entry");
for (i = 0; i < x.length; i++) {
postTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
postUrl = x[i].getElementsByTagName("link")[0].getAttribute("href");
document.write("<div class='accordion'>" + postTitle + "</div><div class='panel'><a href='" + postUrl + "'>Read more</a></div>");
}
}
};
xmlhttp.open("GET", feed, true);
xmlhttp.send();
</script>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.nextElementSibling.style.display = (this.nextElementSibling.style.display === "block") ? "none" : "block";
};
}
</script>
- Save and publish the page to activate the collapsible effect.
4. Category-Based Sitemap
This style is best suited for blogs with multiple topics, grouping posts by categories for easier navigation.
Steps:
Insert the following code on your new page in HTML view:
<div class="category-sitemap">
<script>
// Use JavaScript to fetch posts by category
// Group them dynamically based on labels
</script>
</div>
Note: This code will need further customization to fetch specific categories dynamically, depending on your blog's setup.
Final Thoughts
An HTML sitemap not only enhances your blog’s usability but also helps search engines index your content better. These four styles provide versatile options for Blogger users, and you can customize each to fit your blog’s design.