How to Create Sitemap Page in Blogger

In this tutorial you are going to learn how to create clean and responsive html sitemap page on blogger.

Blogspot is a very good platform if you want to start a blog with out paying for a host.

how to create sitemap page on blogger

If you create a website with blogger you will see that you need to implement some things on your blog to make it well optimize.

So if you want to add or create html sitemap page for your blogspot blog then is a good idea because is another way to optimize your blogspot blog.

Blogger already have the option to automatically generate xml sitemap for your blog, while the html sitemap will be done by you.

Difference with html and xml sitemap

Xml sitemap is the one you will put on Google search console for Google bot to crawl your site easily.

while the html sitemap is the one you create a page called sitemap and you put some code inside for it to generate a list of all your published post in the sitemap page.

Doing so will increase your seo performance because when search engine crawl your page it will be able to get all of your posts.

You can also check How To Setup Syntax Highlighter on Blogger

Some code you will need to edit your template but the one you are going to received here will have no need for you to edit your template.

This code will generate clean and beautiful sitemap for you with labels.

How to create HTML sitemap page for blogger

Login to the blog you want to put html sitemap and choose page >create new page.

You are going to create a new page and name it sitemap.

Don’t publish the empty page yet, put the sitemap code I’m going to provide below inside.

But before you put it there are things you need to remember.

In your sitemap page don’t ever click the compose tap make sure it is html only, but you can use compose tap in other pages.

while in the sitemap page if you ever click the compose tap the sitemap will stop showing.

If i clicked the compose tap and my sitemap stop showing so what should i do?

Go to html and clean all the codes then save the page and edit it again but make sure you are in html mode

then copy the code provided below here in this post and paste it there then publishe your page.

If you are using the code below in this post then you don’t have to add or delete any thing

because the code is created in such a way that it will auto create your posts for you without putting your homepage url, so you don’t need to add anything to the code.

Now copy and paste this

<div dir="ltr" style="text-align: left;" trbidi="on"> <!-- Copy All -->
<br />
<div style="margin-bottom: 30px; text-align: left;  font-weight: 600;">
Here you find posts published.</div>
<div id="sitmap">

<noscript>Either you have disabled scripts in your browser or your browser does not support JavaScript!</noscript>
<script type="text/javascript">
/* Blogger TOC by Pero Ted * Style by https://www.supermoonhost.com * Author URL: https://www.supermoonhost.com */
function loadtoc(t){function e(){if("entry"in t.feed){var e=t.feed.entry.length;numberfeed=e,ii=0;for(var o=0;e>o;o++){for(var s,r=t.feed.entry[o],a=r.title.$t,l=r.published.$t.substring(0,10),i=0;i<r.link.length;i++)if("alternate"==r.link[i].rel){s=r.link[i].href;break}for(var n="",i=0;i<r.link.length;i++)if("enclosure"==r.link[i].rel){n=r.link[i].href;break}var p="";if("category"in r)for(var i=0;i<r.category.length;i++){p=r.category[i].term;var c=p.lastIndexOf(";");-1!=c&&(p=p.substring(0,c)),postLabels[ii]=p,postTitle[ii]=a,postDate[ii]=l,postUrl[ii]=s,postMp3[ii]=n,10>o?postBaru[ii]=!0:postBaru[ii]=!1,ii+=1}}}}e(),sortBy="titleasc",sortPosts(sortBy),sortlabel(),tocLoaded=!0,displayToc2(),document.write()}function filterPosts(t){scroll(0,0),postFilter=t,displayToc(postFilter)}function allPosts(){sortlabel(),postFilter="",displayToc(postFilter)}function sortPosts(t){function e(t,e){var o=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=o;var o=postDate[t];postDate[t]=postDate[e],postDate[e]=o;var o=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=o;var o=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=o;var o=postMp3[t];postMp3[t]=postMp3[e],postMp3[e]=o;var o=postBaru[t];postBaru[t]=postBaru[e],postBaru[e]=o}for(var o=0;o<postTitle.length-1;o++)for(var s=o+1;s<postTitle.length;s++)"titleasc"==t&&postTitle[o]>postTitle[s]&&e(o,s),"titledesc"==t&&postTitle[o]<postTitle[s]&&e(o,s),"dateoldest"==t&&postDate[o]>postDate[s]&&e(o,s),"datenewest"==t&&postDate[o]<postDate[s]&&e(o,s),"orderlabel"==t&&postLabels[o]>postLabels[s]&&e(o,s)}function sortlabel(){sortBy="orderlabel",sortPosts(sortBy);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 o(t,e){var o=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=o;var o=postDate[t];postDate[t]=postDate[e],postDate[e]=o;var o=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=o;var o=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=o;var o=postMp3[t];postMp3[t]=postMp3[e],postMp3[e]=o;var o=postBaru[t];postBaru[t]=postBaru[e],postBaru[e]=o}for(var s=t;e-1>s;s++)for(var r=s+1;e>r;r++)postTitle[s]>postTitle[r]&&o(s,r)}function displayToc(t){var e=0,o="",s="Judul Artikel",r="Klik untuk sortir berdasarkan judul",a="Tanggal",l="Klik untuk Sortir bedasarkan tanggal",i="Kategori",n="";"titleasc"==sortBy&&(r+=" (descending)",l+=" (newest first)"),"titledesc"==sortBy&&(r+=" (ascending)",l+=" (newest first)"),"dateoldest"==sortBy&&(r+=" (ascending)",l+=" (newest first)"),"datenewest"==sortBy&&(r+=" (ascending)",l+=" (oldest first)"),""!=postFilter&&(n="Klik untuk menampilkan semua"),o+="<table>",o+="<tr>",o+='<td class="toc-header-col1">',o+='<a href="javascript:toggleTitleSort();" title="'+r+'">'+s+"</a>",o+="</td>",o+='<td class="toc-header-col2">',o+='<a href="javascript:toggleDateSort();" title="'+l+'">'+a+"</a>",o+="</td>",o+='<td class="toc-header-col3">',o+='<a href="javascript:allPosts();" title="'+n+'">'+i+"</a>",o+="</td>",o+='<td class="toc-header-col4">',o+="Download MP3",o+="</td>",o+="</tr>";for(var p=0;p<postTitle.length;p++)""==t?(o+='<tr><td class="toc-entry-col1"><a href="'+postUrl[p]+'">'+postTitle[p]+'</a></td><td class="toc-entry-col2">'+postDate[p]+'</td><td class="toc-entry-col3">'+postLabels[p]+'</td><td class="toc-entry-col4"><a href="'+postMp3[p]+'">Download</a></td></tr>',e++):(z=postLabels[p].lastIndexOf(t),-1!=z&&(o+='<tr><td class="toc-entry-col1"><a href="'+postUrl[p]+'">'+postTitle[p]+'</a></td><td class="toc-entry-col2">'+postDate[p]+'</td><td class="toc-entry-col3">'+postLabels[p]+'</td><td class="toc-entry-col4"><a href="'+postMp3[p]+'">Download</a></td></tr>',e++));if(o+="</table>",e==postTitle.length)var c='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>";else{var c='<span class="toc-note">Menampilkan '+e+" artikel dengan kategori '";c+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}var d=document.getElementById("toc");d.innerHTML=c+o}function displayToc2(){for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],document.write("<p/>"),document.write('<span class="labl"><a href="/search/label/'+temp1+'">'+temp1+"</a></span><ol class='postname'>"),firsti=t;do document.write("<li>"),document.write('<a href="'+postUrl[t]+'">'+postTitle[t]+"</a>"),1==postBaru[t]&&document.write(' <span class="new"> Latest</span>'),document.write("</li>"),t+=1;while(postLabels[t]==temp1);if(e=t,document.write("</ol>"),sortPosts2(firsti,t),e>postTitle.length)break}}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc",sortPosts(sortBy),displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest",sortPosts(sortBy),displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);{document.getElementById("toclink")}}else alert("Just wait... TOC is loading")}function hideToc(){var t=document.getElementById("toc");t.innerHTML="";var e=document.getElementById("toclink");e.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('toc-result','blind');">?? Menampilkan Daftar Isi</a> <img src="https://cdn4.supermoonhost.com/wp-content/uploads/2020/03/new_1.gif?x39732"/>'}function looptemp2(){for(var t=0;numberfeed>t;t++)document.write("<br>"),document.write('Post Link    : <a href="'+postUrl[t]+'">'+postTitle[t]+"</a><br>"),document.write('Download mp3  : <a href="'+postMp3[t]+'">'+postTitle[t]+"</a><br>"),document.write("<br>")}var postTitle=new Array,postUrl=new Array,postMp3=new Array,postDate=new Array,postLabels=new Array,postBaru=new Array,sortBy="titleasc",tocLoaded=!1,numChars=250,postFilter="",numberfeed=0;jQuery("li.dropdown.redq-fullwidth").hover(function(){setTimeout(function(){jQuery(".redq-fullwidth .dropdown-menu").removeClass("loading"),jQuery(".redq-fullwidth ul.dropdown-menu li").fadeTo("500",1)},3e3)});
</script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<style type="text/css">
#sitmap .labl a{text-transform:uppercase;font-weight:600;padding:1px 5px;margin-top:25px;display:inline-block;border:1px solid #eee}#sitmap .postname .new{background-color:#F3F3F3;margin-left:15px;padding:0 5px 2px;font-size:10px;font-weight:600}.comments,.hot-label-menu-block,.post-footer,.post-header,.sly-reaction-warp,.top-scroll-block{display:none}ol.postname{margin-top:5px}ol.postname li a{display:inline-block;margin-bottom:5px}
</style>


</div>
</div>

How to create HTML sitemap page on blogger

As you see I did not provide a button for you to click and copy the code at once

but you can use your finger to tap and draw the code down for you to copy

when copying the code it might take three seconds for it to be copied because the code is lengthy, so you have to be patient while copying the code.

You can check 10 Blogspot (Blogger) Seo Tips For Bloggers

If you have any question you can ask through the comment box and I also which you good luck and well come to the universe of webmasters.

Leave a Comment

Your email address will not be published. Required fields are marked *