How to Create Simple HTML Sitemap Page in Blogger Blog

Creating a well-organized HTML Table of Contents or Sitemap Page is an excellent way to enhance user experience on your Blogger blog. A sitemap page serves as a directory that helps visitors quickly locate specific posts or pages without hassle. It not only improves navigation but also contributes to better search engine visibility by structuring your blog’s content effectively.

In this tutorial, I will guide you through a simple yet effective method to create and add a fully functional sitemap page to your Blogger blog. Whether you're a beginner or an experienced blogger, this step-by-step guide will make the process quick and effortless—allowing you to set up your sitemap in just a few minutes. By the end of this tutorial, your blog will have a user-friendly sitemap that enhances accessibility and improves overall site engagement.

Let’s get started!

How to Make an Archive Page in BlogSpot Blog?​

The tutorial for adding the sitemap page is very easy if you follow the given instructions below.

1. Go to your blogger blog dashboard.
2. Click on the pages tab from the dashboard.
3. Click on the new page tab and choose the blank page.
4. Write your page title as ‘Archives’.
5. Then Select the HTML tab.

Now copy all bellows JavaScript codes and paste them inside the page.

<script type='text/javascript'>//<![CDATA[

function LoadTheArchive(TotalFeed)

{

var PostTitles = new Array();

var PostURLs = new Array();

var PostYears = new Array();

var PostMonths = new Array();

var PostDays = new Array();

if("entry" in TotalFeed.feed)

{

var PostEntries=TotalFeed.feed.entry.length;

for(var PostNum=0; PostNum<PostEntries ; PostNum++)

{

var ThisPost = TotalFeed.feed.entry[PostNum];

PostTitles.push(ThisPost.title.$t);

PostYears.push(ThisPost.published.$t.substring(0,4));

PostMonths.push(ThisPost.published.$t.substring(5,7));

PostDays.push(ThisPost.published.$t.substring(8,10));

var ThisPostURL;

for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)

{

if(ThisPost.link[LinkNum].rel == "alternate")

{

ThisPostURL = ThisPost.link[LinkNum].href;

break

}

}

PostURLs.push(ThisPostURL);

}

}

DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);

}

function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)

{

var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];

var NumberOfEntries=PostTitles.length;

for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)

{

NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]

document.write('<a href ="'+PostURLs[EntryNum]+'">'+PostTitles[EntryNum]+"</a> ("+NameOfMonth+" "+parseInt(PostDays[EntryNum],10)+", "+PostYears[EntryNum]+")<br />");

}

}

//]]></script>

<script type="text/javascript" src="/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive">// < ![CDATA[

// < ![CDATA[

// < ![CDATA[

// ]]></script>

Last of all save the page and you are done!

Now view your page and see if it's working fine.

Customizations:

If you want to show less or more than 500 posts on the archive page then change the green highlighted text (500).

If this post is helpful and you like it, share it with your social media friends. Thanks for reading!