Tontuf TWL

Home
blogger

Create HTML Sitemap Page for your Blogger Website

What is HTML Sitemap?

An HTML sitemap is a webpage on a website that lists all the important pages of the website in a structured manner, typically using bullet points or nested menus. It's designed to help users find what they're looking for on the website, especially on large websites with complex navigation.

Here are some of the benefits of an HTML sitemap:

  • Improved User Experience: An HTML sitemap acts like a directory, making it easier for users to navigate your website and find the information they need. This is especially helpful for complex websites with a lot of content.
  • Better SEO: While not a direct ranking factor, an HTML sitemap can indirectly improve your SEO by making it easier for search engines to understand the structure of your website and find all of your important pages. This is because the sitemap provides a clear hierarchy of your website's content with text and links.
  • Enhanced Internal Linking: You can use your HTML sitemap to create a network of internal links throughout your website. This helps search engines understand the relationships between your different pages and can improve your website's ranking.

In contrast to an HTML sitemap, there is also an XML sitemap, which is a file specifically designed for search engines. An XML sitemap uses a special format that search engines can easily understand. You can submit an XML sitemap to search engines to help them find and index your website's pages.

How to Create HTML Sitemap?

Creating an HTML sitemap for your Blogger website is a great way to enhance user experience and improve your site's SEO. An HTML sitemap lists all the pages and posts on your site, helping visitors and search engines navigate your content more efficiently. Here's a step-by-step guide to creating an HTML sitemap for your Blogger website.

  • Log in to Blogger: Start by logging into your Blogger account and accessing your blog's dashboard.
  • Create a New Page: Navigate to the "Pages" section and click on "New Page" to create a new page for your sitemap.
  • Title Your Page: Give your new page a title, such as "Sitemap" or "Site Index."

  • Add Sitemap Code: To automatically generate a sitemap, you'll need to insert a custom HTML code snippet. Here's a sample code you can use:

 <div id="sitemap"></div>
 <script>
 var postTitle = [];
 var postUrl = [];
 var htmlCode = '';
 var feedUrl = "/feeds/posts/default?max-results=500&alt=json";

 function createSitemap(json) {
     var entry = json.feed.entry;
     for (var i = 0; i < entry.length; i++) {
         postTitle.push(entry[i].title.$t);
         for (var j = 0; j < entry[i].link.length; j++) {
             if (entry[i].link[j].rel === "alternate") {
                 postUrl.push(entry[i].link[j].href);
                 break;
             }
         }
     }
     for (var k = 0; k < postTitle.length; k++) {
         htmlCode += '<li><a href="' + postUrl[k] + '">' + postTitle[k] + '</a></li>';
     }
     document.getElementById('sitemap').innerHTML = '<ul>' + htmlCode + '</ul>';
 }

 function loadSitemap() {
     var script = document.createElement('script');
     script.src = feedUrl + '&callback=createSitemap';
     document.body.appendChild(script);
 }

 window.onload = loadSitemap;
 </script>

This script fetches your blog's posts and generates a list of links to them.

HTML Sitemap Script by Piki Templates:

<script src="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/pikitemplates/scripts/sitemap-css.css" rel="stylesheet"/>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=pikisitemap" type="text/javascript"></script>

  • Publish Your Page: Once you've inserted the code, click "Publish" to make your sitemap page live.

  • Link to Your Sitemap: Add a link to your sitemap page in your blog's navigation menu or footer to make it easily accessible to your visitors.

Creating an HTML sitemap is a straightforward process that can significantly improve the usability of your Blogger website. By providing a clear and organized list of your content, you help visitors find what they're looking for and enhance your site's SEO performance. You can check the preview of this sitemap here: Ttearncrypto.blogspot.com/p/sitemap.html.


Used Assets (ignore) :

  • sitemap-css.css

    .stiemap-posts{position:relative;display:block;margin:14px 0 20px;}
.stiemap-posts h4{background:rgb(206 204 204 / 0.34);color:#000;padding:4px 12px;border-radius:4px;font-size:16px;border-bottom:2px solid #b5b5b5;margin:0 0 3px;line-height:21px;}
.stiemap-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background:rgb(246 252 255 / 0.13);border:1px solid rgb(255 255 255 / 0.38);border-radius:5px;padding:0 10px;box-shadow:2px 3px 8px 1px rgb(167 225 255 / 0.28);}
.stiemap-wrap p{width:calc((100% - 10px) / 2);margin:3px 0;}
.stiemap-wrap p a{position:relative;font-size:15px;line-height:25px;display:block;margin:9px 0 0;font-weight:500;color:#000;border-bottom:1px solid #d4ebf9;}
.stiemap-wrap p strong span{color:#e00303;font-size:13px;font-weight:600;}
.stiemap-posts h4:before{content:"\f142";float:left;color:#000;font-weight:900;font-family:'Font Awesome 5 Free';font-size:12px;margin:0 4px 0 0;}
.stiemap-wrap p a:before{content:"\f192";float:left;color:#000;font-weight:500;font-family:'Font Awesome 5 Free';font-size:12px;line-height:26px;margin:0 4px 0 0;}
.stiemap-wrap p a:hover{color:#1616fb;}
@media screen and (max-width:640px){.stiemap-wrap{display:block;}
.stiemap-wrap p{width:100%;}
}

  • sitemap.js

    var postTitle=new Array,postUrl=new Array,postPublished=new Array,postDate=new Array,postLabels=new Array,postRecent=new Array,sortBy="titleasc",numberfeed=0;function pikisitemap(t){!function(){if("entry"in t.feed){var e=t.feed.entry.length;numberfeed=e,ii=0;for(var s=0;s<e;s++){for(var o,i=t.feed.entry[s],p=i.title.$t,l=i.published.$t.substring(0,10),r=0;r<i.link.length;r++)if("alternate"==i.link[r].rel){o=i.link[r].href;break}var a="";for(r=0;r<i.link.length;r++)if("enclosure"==i.link[r].rel){a=i.link[r].href;break}var n="";if("category"in i)for(r=0;r<i.category.length;r++){var b=(n=i.category[r].term).lastIndexOf(";");-1!=b&&(n=n.substring(0,b)),postLabels[ii]=n,postTitle[ii]=p,postDate[ii]=l,postUrl[ii]=o,postPublished[ii]=a,postRecent[ii]=s<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;){temp1=postLabels[e],firsti=t;do{t+=1}while(postLabels[t]==temp1);if(e=t,sortPosts2(firsti,t),e>postTitle.length)break}}function sortPosts2(t,e){function s(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 o=t;o<e-1;o++)for(var i=o+1;i<e;i++)postTitle[o]>postTitle[i]&&s(o,i)}function displayToc(){for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],document.write(""),document.write('<div class="stiemap-posts"><h4>'+temp1+'</h4><div class="stiemap-wrap">'),firsti=t;do{document.write("<p>"),document.write('<a " href="'+postUrl[t]+'">'+postTitle[t]),1==postRecent[t]&&document.write(" - <strong><span>New!</span></strong>"),document.write("</a></p>"),t+=1}while(postLabels[t]==temp1);if(e=t,document.write("</div></div>"),sortPosts2(firsti,t),e>postTitle.length)break}}