How to Create a Stylish Sitemap for Blogspot (Blogger) with HTML, CSS & JavaScript
A stylish HTML sitemap makes it easier for visitors to browse your blog while improving your internal linking structure. Unlike Blogger's XML sitemap, an HTML sitemap is designed for human visitors and can automatically display all your blog posts in a beautiful layout.
In this tutorial, you'll learn how to create a responsive sitemap page for your Blogger website.
Features
✅ Responsive design
✅ Modern card layout
✅ Automatic post listing
✅ Post publish date
✅ Search box
✅ Mobile-friendly
✅ Easy to customize
Step 1: Create a New Page
Open your Blogger Dashboard.
Go to Pages.
Click New Page.
Name it Sitemap.
Switch to HTML View.
Step 2: Paste the Following Code
Replace
YOURBLOG.blogspot.comwith your own Blogspot URL.
<style>
#gositemap{
max-width:900px;
margin:30px auto;
font-family:Arial,sans-serif;
}
#gositemap input{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:8px;
margin-bottom:20px;
font-size:16px;
outline:none;
}
.post-card{
background:#fff;
border-radius:12px;
padding:15px;
margin:12px 0;
box-shadow:0 4px 10px rgba(0,0,0,.08);
transition:.3s;
}
.post-card:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.post-card a{
font-size:18px;
font-weight:bold;
color:#0066cc;
text-decoration:none;
}
.post-card span{
display:block;
margin-top:8px;
color:#666;
font-size:14px;
}
</style>
<div id="gositemap">
<input type="text" id="search" placeholder="Search posts...">
<div id="posts"></div>
</div>
<script>
const blog="https://YOURBLOG.blogspot.com";
fetch(blog+"/feeds/posts/default?alt=json&max-results=500")
.then(res=>res.json())
.then(data=>{
let html="";
data.feed.entry.forEach(post=>{
let title=post.title.$t;
let link="";
post.link.forEach(l=>{
if(l.rel=="alternate"){
link=l.href;
}
});
let date=post.published.$t.substring(0,10);
html+=`
<div class="post-card">
<a href="${link}" target="_blank">${title}</a>
<span>Published: ${date}</span>
</div>
`;
});
document.getElementById("posts").innerHTML=html;
});
document.getElementById("search").addEventListener("keyup",function(){
let filter=this.value.toLowerCase();
document.querySelectorAll(".post-card").forEach(card=>{
card.style.display=card.innerText.toLowerCase().includes(filter)
? "block":"none";
});
});
</script>
Step 3: Replace Your Blog URL
Locate this line:
const blog="https://YOURBLOG.blogspot.com";
Replace it with your own Blogger address.
Example:
const blog="https://galaxyonknowledge.blogspot.com";
Step 4: Publish the Page
Click Publish and open your Sitemap page.
Your page will automatically load your latest Blogger posts in a clean, responsive card layout.
You want to see demo click here!
Customization Ideas
You can further improve your sitemap by:
Adding post thumbnails.
Displaying post labels (categories).
Showing the total number of posts.
Sorting posts alphabetically.
Adding a dark mode.
Creating category filters.
Adding smooth animations.
SEO Benefits
A well-designed HTML sitemap offers several SEO advantages:
Improves internal linking.
Helps visitors discover older content.
Reduces bounce rate.
Encourages users to explore more pages.
Makes your blog easier to navigate.
Complements your XML sitemap for search engines.
Conclusion
Creating a stylish HTML sitemap in Blogger is a simple way to improve your site's usability and appearance. The code above automatically fetches your published posts from Blogger's JSON feed and displays them in a responsive card layout with a built-in search feature. With a few customizations, you can create a professional sitemap that enhances both user experience and SEO.