Table of Contents
A static sitemap page is very helpful for a website's visitors to navigate the site easily. It is a blueprint of the website and it is very important. A static sitemap is always HTML (HyperText Markup Language) formated. Blogger has many attractive gadgets but there is no gadget available to create a static sitemap page. In this tutorial, you will learn how to create HTML sitemap page on Blogger?
What is HTML Sitemap Page?
A static sitemap page makes it easy to navigate a website. This is a complete list of posts published on the blog, including post topics. Visitors can easily locate a topic when they are unable to find it by searching on the site or navigating through the site menus.
Read Also: All In One SEO Pack For BlogSpot
Why Static Sitemap Page is Important?
HTML sitemap page contains all of your published posts. If your blog or website has too many contents then it is a little bit difficult to find out your old published contents. So, if your visitors are trying to find out a post that you publish a few months or years ago and your blog search does not give the result then it is very ideal to check the sitemap. You can easily generate HTML sitemap page for your blog and link it in your footer section.
How to Create HTML Sitemap Page on Blogger?
Creating HTML sitemap page in Blogger is very easy and you can do this without facing any problem. Just follow the below steps carefully.
Step 2: Now go to Pages > New page
Step 3: Type your page title in the page title field (ex. Sitemap)
Step 4: Switch to HTML mode
Step 5: Paste the below code
<!-- HTML Sitemap Page By WikiPoka.com -->
<style type="text/css">
.post-archive{margin-bottom: 20px}
.post-archive h2{display:block;color:#000;font-size:23px;font-family:'Roboto', Arial, sans-serif;font-weight:500;margin:0;padding:0}
.post-archive ul{padding: 0 0 0 15px;margin: 15px 0 0 0;}
.post-archive ul li{padding: 0;margin: 0 0 8px 0;list-style: inside}
.post-archive ul li:before{content: '';margin: 0;padding: 0}
.post-archive ul li:last-child{margin: 0}
.ct-columns li strong{font-family: 'Roboto', Arial, sans-serif;font-weight:500;font-style:italic;color:#FF5F00;}
</style>
<script type="text/javascript">
var postTitle=new Array,postUrl=new Array,postPublished=new Array,postDate=new Array,postLabels=new Array,postRecent=new Array,sortBy="titleasc",numberfeed=0;function bloggersitemap(b){!function(){if("entry"in b.feed){var t=b.feed.entry.length;numberfeed=t;for(var e=ii=0;e<t;e++){for(var s,o=b.feed.entry[e],i=o.title.$t,l=o.published.$t.substring(0,10),r=0;r<o.link.length;r++)if("alternate"==o.link[r].rel){s=o.link[r].href;break}for(var p="",r=0;r<o.link.length;r++)if("enclosure"==o.link[r].rel){p=o.link[r].href;break}var a="";if("category"in o)for(r=0;r<o.category.length;r++){var n=(a=o.category[r].term).lastIndexOf(";");-1!=n&&(a=a.substring(0,n)),postLabels[ii]=a,postTitle[ii]=i,postDate[ii]=l,postUrl[ii]=s,postPublished[ii]=p,postRecent[ii]=e<10,ii+=1}}}}(),sortPosts(sortBy="titledesc"),sortlabel(),displayToc()}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s;s=postPublished[t];postPublished[t]=postPublished[e],postPublished[e]=s;s=postRecent[t];postRecent[t]=postRecent[e],postRecent[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o),"orderlabel"==t&&postLabels[s]>postLabels[o]&&e(s,o)}function sortlabel(){sortPosts(sortBy="orderlabel");for(var t=0,e=0;e<postTitle.length;){for(temp1=postLabels[e],firsti=t;postLabels[t+=1]==temp1;);if(e=t,sortPosts2(firsti,t),e>postTitle.length)break}}function sortPosts2(t,e){for(var s,o,i,l=t;l<e-1;l++)for(var r=l+1;r<e;r++)postTitle[l]>postTitle[r]&&(o=r,i=void 0,i=postTitle[s=l],postTitle[s]=postTitle[o],postTitle[o]=i,i=postDate[s],postDate[s]=postDate[o],postDate[o]=i,i=postUrl[s],postUrl[s]=postUrl[o],postUrl[o]=i,i=postLabels[s],postLabels[s]=postLabels[o],postLabels[o]=i,i=postPublished[s],postPublished[s]=postPublished[o],postPublished[o]=i,i=postRecent[s],postRecent[s]=postRecent[o],postRecent[o]=i)}function displayToc(){for(var t=0,e=0;e<postTitle.length;){for(temp1=postLabels[e],document.write(""),document.write('<div class="post-archive"><h2>'+temp1+'</h2><ul class="ct-columns">'),firsti=t;document.write("<li>"),document.write('<a href="'+postUrl[t]+'">'+postTitle[t]),1==postRecent[t]&&document.write(" - <strong><span>New!</span></strong>"),document.write("</a></li>"),postLabels[t+=1]==temp1;);if(e=t,document.write("</ul></div>"),sortPosts2(firsti,t),e>postTitle.length)break}}
</script>
<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap"></script>
<!-- HTML Sitemap Page By WikiPoka.com -->Step 6: Finally, Publish the page.
Wow! You are done.
How to Customize HTML Sitemap Page?
You have already created a static sitemap page for your blog following my tutorial. Now, it's time to customize your sitemap page to make it more SEO-friendly. Customizing a Blogger HTML sitemap page is very easy. So, let's do it.
Step 2: Go to Pages > Sitemap
Step 3: Now go to Page Settings > Search Description and enter a meta description for this page
Step 4: Again, go to Page Settings > Options > Reader Comment and click on Do not allow, hide existing
Step 5: Finally, Update your page.
See More: Jettheme Premium Blogger Template Free Download
Wrapping Up!
I tried my best to help you create HTML sitemap page in Blogger. Still, if you have any questions or face any errors while following my tutorial then please ask me in the comment section and I would love to answer your question. Don't forget to share this tutorial on social media and please follow us on social media platforms to stay updated. Have a nice day, Bye!