How to Create HTML Sitemap Page for Blogger

Published by PT on

How to create HTML sitemap page for blogger

How to create HTML sitemap page for blogger

In this tutorial you are going to learn how to create clean and responsive sitemap page for blogger. Blogspot is a very good platform if you want to start a blog with out paying for a host.

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 set up a 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 this code 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 with out 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://www.supermoonhost.com/wp-content/uploads/2020/03/new_1.gif"/>'}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 for 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 when copying the code.

You can check 10 Best Blogspot 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.

Categories: Blogger

0 Comments

Leave a Reply

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