How to Create a HTML Sitemap Page in Blogger : Responsive

Should you create a HTML sitemap into your Blogger? Every blog should have at-least one page by which you can navigate to all of your blog posts. Therefore, yes you must create a HTML sitemap into your Blogger. In this post, I will share a cool method to create a responsive sitemap page for your blogger with cool design features. HTML sitemap doesn't only help your visitors to look over your blog at a glance it can help to crawl and index your blog pages faster. Adding Sitemap page in WordPress is so easier than Blogger with the help of tons of plugins, in Blogger, you need to manually add the sitemap widget. Adding this sitemap widget to your blogger is also easier. Just you have to copy the following code, and paste it to your Blogger page and done! Therefore, here is a simple guide to create a HTML responsive sitemap to Blogger.
Live Demo: Blogger Sitemap

Create a Responsive HTML Sitemap Blogger Page

Go to 'Blogger Dashboard', and select your Blog.
Click on 'Pages' -> 'New Page'. Now, Choose 'HTML' part (near to 'Compose').
Now copy the following code.

<script type="text/javascript">
  
 var numposts = 100;
 var standardstyling = true;
  
 function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
     posturl = entry.link[k].href;
     break;
    }
   }
   posttitle = posttitle.link(posturl);
   if (standardstyling) document.write('<li>');
   document.write(posttitle);
  }
   if (standardstyling) document.write('</li>');
 }
</script>
 
<br />
<ul>
 <script src="https://softdews.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>