Skip to main content

follow us

How to Add a Stylish Sitemap Page to a Blogger Blog

Hey guys, recently I wrote about how to submit a blog's Sitemap to Google and Bing webmaster tools. Today am going to be dropping a tutorial on how to add a Sitemap page on a blogger blog.

What is a Sitemap?

Sitemap is a comprehensive list of all your blog posts which help search engines bots to understand and crawl your blog easily. With Sitemap submitted to search engines, your newly published articles shows up quickly in search results. It increases the rate at which crawling and indexing of your newly published posts.

In my previous post,  we submitted a default blogger Sitemap and an custom Xml Sitemap to Search Engines( Google and Bing ). Well that's for search engine bots, now we are going to add a visible Sitemap page that contains all the list of your posts. This page is a must have for every blog because it increases your SEO and Pageviews. As we already know that SEO is very important in blogging. Today we are going to learn how to add a Sitemap page to a blogger blog. Below is how the page will look like.


How to Add a Sitemap Page on a Blogger Blog 

Follow me as I give the steps for adding a table of content page to a blogger blog.
Step 1

Login to your blogger dashboard>>Click on Pages>>Create New Page

Step 2
Name the Page "Sitemap". Now click the Html Tab behind Compose. See the below screenshot.

You will find some codes there, delete all of them. Then paste the below html code into the empty space.

<div id="tabbed-toc"><span class="loading">Loading, please wait for a moment...</span></div><br /><script type="text/javascript"> var tabbedTOC = { blogUrl: "", // Enter your blog URL containerId: "tabbed-toc", // Container ID activeTab: 1, // The default active tab index (default: the first tab) showDates: false, // `true` to show the post date showSummaries: false, // `true` to show the posts summaries numChars: 200, // Number of summary chars showThumbnails: false, // `true` to show the posts thumbnails (Not recommended) thumbSize: 40, // Default thumbnail size noThumb: "", // A "no thumbnail" URL monthNames: [ // Array of month names "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], newTabLink: true, // Open link in new window. `false` to open in same window maxResults: 99999, // Maximum post results preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload") sortAlphabetically: true, // `false` to sort posts by published date showNew: 7, // `false` to hide the "New!" mark in most recent posts or //define how many recent posts are to be marked by changing the number newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for //the "New!" text }; </script><script src="" type="text/javascript"></script><style> /*Sitemap */ #tabbed-toc { width: 99%; margin: 0 auto; overflow: hidden !important; position: relative; color: #222; border: 0; border-top: 5px solid #FC0204; background-color: #1D1D1D; -webkit-transition: all 0.4s ease-in-out; } #tabbed-toc .loading { display:block; padding:5px 15px; font:normal bold 11px Arial,Sans-Serif; color:#FFF; } #tabbed-toc ul, #tabbed-toc ol, #tabbed-toc li { margin:0; padding:0; list-style:none; } #tabbed-toc .toc-tabs { width: 24.8%; float: left !important; } #tabbed-toc .toc-tabs li a { display:block; font:normal bold 10px/28px Arial,Sans-Serif; height:28px; overflow:hidden; text-overflow:ellipsis; color:#ccc; text-transform:uppercase; text-decoration:none; padding:0 12px; cursor:pointer; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .toc-tabs li a:hover { background-color: #515050; color: #FFF; } #tabbed-toc .toc-tabs li { background-color: #FFFC03; color: #222; position: relative; z-index: 5; margin: 0 -2px 0 0; } #tabbed-toc .toc-content, #tabbed-toc .divider-layer { width: 75%; float: right !important; background-color: #F5F5F5; border-left: 5px solid #FFFC03; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .divider-layer { float:none; display:block; position:absolute; top:0; right:0; bottom:0; } #tabbed-toc .panel { position:relative; z-index:5; font:normal normal 10px Arial,Sans-Serif; } #tabbed-toc .panel li a { display: block; position: relative; font-weight: bold; font-size: 11px; color: #222; line-height: 2.8em; height: 30px; padding: 0 10px; text-decoration: none; outline: none; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .panel li time { display:block; font-style:italic; font-weight:400; font-size:10px; color:#666; float:right; } #tabbed-toc .panel li .summary { display:block; padding:10px 12px; font-style:italic; border-bottom:4px solid #275827; overflow:hidden; } #tabbed-toc .panel li .summary img.thumbnail { float:left; display:block; margin:0 8px 0 0; padding:4px; width:72px; height:72px; border:1px solid #dcdcdc; background-color:#fafafa; } #tabbed-toc .panel li:nth-child(even) { background-color: #DBDBDB; font-size: 10px; } #tabbed-toc .panel li a:hover, #tabbed-toc .panel li a:focus, #tabbed-toc .panel li a:hover time, #tabbed-toc .panel li.bold a { background-color:#222; color:#FFF; outline:none; -webkit-transition: all 0.3s ease-in-out; } #tabbed-toc .panel li.bold a:hover, #tabbed-toc .panel li.bold a:hover time { background-color:#222; } @media (max-width:700px) { #tabbed-toc { background-color:#fff; border:0 solid #888; } #tabbed-toc .toc-tabs, #tabbed-toc .toc-content { overflow:hidden; width:auto; float:none !important; display:block; } #tabbed-toc .toc-tabs li { display:inline; float:left !important; } #tabbed-toc .toc-tabs li a, #tabbed-toc .toc-tabs li { background-color:#222; color:#ccc; } #tabbed-toc .toc-tabs li { color:#000; } #tabbed-toc .toc-content { border:none; } #tabbed-toc .divider-layer, #tabbed-toc .panel li time { display:none; } } </style>

Step 3
- Replace "" with the URL of your blog.
If you are using a free blogspot domain, always put .com at the back of your domain. Example "use "" instead of ""

- To edit the text shown before the Sitemap finish loading, change "Loading, please wait for a moment..." to something like "Keep calm, Our Sitemap is Loading..." 

- In the above code, I used the color that suit the design of my blog, if you wish to change the color scheme, Replace "#FFFC03" with your colour code

Step 4
If you wish to disable Comments on this Page, Click on Option Tab>>Reader Comments, then select "Don't Allow, hide existing". Now click Publish, view the sitepage it should be running nicely. We have successfully added a Sitemap page to a blogger blog.

If there is any problem adding this Sitemap page to your blog, let us know by dropping a comment. We'll attend to it in a while. Do you find our post helpful? Don't forget to like us on Facebook and keep sharing us with your friends. 
Happy blogging....... 

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment