Website Sitemap Page (Blogger Sitemap Page)
A sitemap page — also known as an index page or archive page — is essential for every website. It helps visitors easily find the posts, labels, and categories they are searching for. This improves user experience and keeps your content well-organized.
The sitemap page you will learn to create today automatically displays all posts in your blog, grouped by labels (categories) in a clean and organized layout. Whether your template is free or premium, this sitemap works perfectly on all Blogger templates without any errors.
How to Install the Sitemap Page in Blogger:
- Go to your Blogger Dashboard.
- Open Pages from the left menu.
- Create a new blank page.
- Name it something like Sitemap.
- Switch the page editor from Compose to HTML view.
- Copy the entire code below and paste it inside the page.
<style scoped="" type="text/css">
.post-body table tr:nth-of-type(even):hover td,
.post-body table tr:nth-of-type(odd):hover td { background-color: transparent!important;}
.post-body table tr:nth-of-type(odd) td { background-color: transparent!important; }
.post-body table td, .post-body table caption { padding: 0 10px!important;}
#table-outer table{width:100%;margin:0 auto;box-shadow:none;}
#table-outer form{font:inherit}
#table-outer label{text-align:left}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{
font-family:Roboto,sans-serif!important;font-size:16px!important;
font-weight:500!important;text-transform:capitalize!important;
outline:0;color:#333!important;box-sizing:border-box;width:100%;
border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px}
#feed-container{overflow:hidden;position:relative;display:block;clear:both;
margin:10px;padding:0;list-style:none;}
#feed-container li{list-style:none;margin:0 0 10px;padding:0 10px 0 0;
color:#555;width:33%;text-align:center;float:right;box-sizing:border-box}
#feed-container li .inner{
position:relative;overflow:hidden;word-wrap:break-word;border-radius:.3em;
background:#fff;color:#555;margin:0;padding:50px;height:200px;
line-height:1.2em;box-shadow:0 1px 5px rgba(0,0,0,0.1);}
#feed-container li img{width:100%!important;height:100%!important;
position:absolute;top:0;left:0}
#result-desc{text-align:center;margin-top:-40px;}
#feed-nav{text-align:center;font-weight:500;margin:0 auto}
</style>
<div id="table-outer">
<table>
<tbody>
<tr>
<td><label>Post Order:</label></td>
<td>
<select id="feed-order">
<option value="published" selected>Latest Posts</option>
<option value="updated">Recently Updated</option>
</select>
</td>
</tr>
<tr>
<td><label>Categories:</label></td>
<td>
<select id="label-sorter" disabled>
<option selected>Labels...</option>
</select>
</td>
</tr>
<tr>
<td><label>Search Posts:</label></td>
<td>
<form id="post-searcher">
<input id="feed-q" placeholder="Search here..." type="text" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav"></div>
<!-- IMPORTANT: Change 'TechnoPraveen.com' to your own blog URL inside the script -->
<script src="//raw.githack.com/iHussam/ar1web/master/sit.js"></script>
After adding the sitemap script to your Blogger page, make sure to replace the default blog URL (TechnoPraveen.com) with your own domain inside the script if needed.
Done!
This concludes our guide on
"How to Add a Sitemap Page in Blogger".
We’ll meet again in a new tutorial here on the blog—stay safe and have a wonderful day! 🙂
