How to create beautiful HTML Sitemap Page in Blogger Blog

How to create beautiful HTML Sitemap Page in Blogger Blog

Are you want to create an HTML sitemap page in blogger, in this post we are going to know how to create an HTML sitemap page in blogger. Before starting the tutorial let's know about the HTML sitemap page.

What is the HTML sitemap page?

The HTML sitemap displays all the published posts of your website in a list format. Just like a table of content. The main reason for using HTML based sitemap is that you can display all your posts in an organized way so that your users can navigate all your posts through one page.

XML sitemap vs HTML Sitemap

  • The XML Sitemap is created by the markup language for your website. It helps all search engine crawlers (bots) to easily read/know/understand all your posts and index the posts in search engines like Google, Bing, and Yahoo.
  • The main reason for using HTML based sitemap is that you can display all your posts in an organized way so that your users can navigate all your posts through one page.

Features of HTML Sitemap

  • The post list will update automatically with the addition of new posts.
  • Visitors can see the date and label of all posts.
  • Sorted alphabetically

How To Add Sitemap Page In Blogger

Step 1: Log in to your Blogger account, then click on Pages ➤ New page.

 Login to your Blogger account, then click on Pages ➤ New page

Step2: Type "Sitemap" in the Page title box.

Click on HTML

Step 4. Clear the all default code inside the HTML box before pasting the provided code.
Step 5. Copy this code and paste it in the HTML Box.
Copy This HTML SiteMap Code

<style type="text/css">
#bp_toc {background: #FFFFFF;border: 0 solid #000000;margin-top: 10px;padding: 10px 0;width: 100%;}h3.bp_toc_title {font-size: 28px;line-height: 30px;padding-top: 40px;margin: 0 0 20px;}#bp_tocm {margin-right: 30px;}#bp_toc a {text-decoration: none !important;}#bp_toc a:hover {text-decoration: underline !important;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #4e4949;border-bottom: 5px solid #dfdfdf;padding: 10px;width: 50%;}.toc-entry-col2 {border-left:2px solid #FFFFFF;border-right: 2px solid #FFFFFF;}.toc-header-col2 {border-left: 2px solid #FFFFFF;border-right: 2px solid #FFFFFF;width: 15%;}
.toc-header-col3 {width: 35%;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {color: #EBEBEB;font-size: 14px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.4em;
    text-decoration: none;
    border-collapse: separate;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration: underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    background: #F8F8F8;
    border-bottom: 2px solid #FFFFFF;
    padding: 10px;
}
.toc-entry-col2 {
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
    color: #45818E;
    font-family: 'Verdana',Arial,sans-serif;
    font-size: 12px;
}
.toc-note {
    background-color: #4e4949;
    color: #EBEBEB;
    display: inline-block;
    font-size: 14px;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid #dfdfdf;
}
</style>
<div id='bp_tocm'>
<div id='bp_toc'>
<script type='text/javascript'>//<![CDATA[
var postTitle=[],postUrl=[],postDate=[],postSum=[],postLabels=[],sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("bp_toc"),totalEntires=0,totalPosts=0; function loadtoc(c){if("entry"in c.feed){var d=c.feed.entry.length;totalEntires+=d;totalPosts=c.feed.openSearch$totalResults.$t;if(totalPosts>totalEntires){var b=document.createElement("script");b.type="text/javascript";startindex=totalEntires+1;b.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadtoc");tocdiv.appendChild(b)}for(b=0;b<d;b++){for(var a=c.feed.entry[b],e=a.title.$t,k=a.published.$t.substring(0,10),l,f=0;f<a.link.length;f++)if("alternate"== a.link[f].rel){l=a.link[f].href;break}var g="content"in a?a.content.$t:"summary"in a?a.summary.$t:"",g=g.replace(/<\S[^>]*>/g,"");if(g.length>numChars)var g=g.substring(0,numChars),h=g.lastIndexOf(" "),g=g.substring(0,h)+"...";h="";if("category"in a){for(f=0;f<a.category.length;f++)h+="<a href=\"javascript:filterPosts('"+a.category[f].term+"');\" title=\"Click here to select all posts with label '"+a.category[f].term+"'\">"+a.category[f].term+"</a>, ";a=h.lastIndexOf(",");-1!=a&&(h=h.substring(0, a))}postTitle.push(e);postDate.push(k);postUrl.push(l);postSum.push(g);postLabels.push(h)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc());sortPosts(sortBy);tocLoaded=!0}function filterPosts(c){postFilter=c;displayToc(postFilter)}function allPosts(){postFilter="";displayToc(postFilter)} function sortPosts(c){function d(a,b){var c=postTitle[a];postTitle[a]=postTitle[b];postTitle[b]=c;c=postDate[a];postDate[a]=postDate[b];postDate[b]=c;c=postUrl[a];postUrl[a]=postUrl[b];postUrl[b]=c;c=postSum[a];postSum[a]=postSum[b];postSum[b]=c;c=postLabels[a];postLabels[a]=postLabels[b];postLabels[b]=c}for(var b=0;b<postTitle.length-1;b++)for(var a=b+1;a<postTitle.length;a++)"titleasc"==c&&postTitle[b]>postTitle[a]&&d(b,a),"titledesc"==c&&postTitle[b]<postTitle[a]&&d(b,a),"dateoldest"==c&&postDate[b]> postDate[a]&&d(b,a),"datenewest"==c&&postDate[b]<postDate[a]&&d(b,a)} function displayToc(c){var d=0,b,a="Click to sort by title",e="Click to sort by date",k="";"titleasc"==sortBy&&(a+=" (descending)",e+=" (newest first)");"titledesc"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"dateoldest"==sortBy&&(a+=" (ascending)",e+=" (newest first)");"datenewest"==sortBy&&(a+=" (ascending)",e+=" (oldest first)");""!=postFilter&&(k="Click to show all posts");b="<table><tr>";b+='<td class="toc-header-col1">';b+='<a href="javascript:toggleTitleSort();" title="'+a+'">POST TITLE</a>'; b+="</td>";b+='<td class="toc-header-col2">';b+='<a href="javascript:toggleDateSort();" title="'+e+'">POST DATE</a>';b+="</td>";b+='<td class="toc-header-col3">';b+='<a href="javascript:allPosts();" title="'+k+'">LABELS</a>';b+="</td>";b+="</tr>";for(a=0;a<postTitle.length;a++)""==c?(b+='<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>",d++): (z=postLabels[a].lastIndexOf(c),-1!=z&&(b+='<tr><td class="toc-entry-col1"><a href="'+postUrl[a]+'" title="'+postSum[a]+'">'+postTitle[a]+'</a></td><td class="toc-entry-col2">'+postDate[a]+'</td><td class="toc-entry-col3">'+postLabels[a]+"</td></tr>",d++));b+="</table>";c=d==postTitle.length?'<div class="toc-note">Displaying all '+postTitle.length+" posts<br/></div>":'<div class="toc-note">Displaying '+d+" posts labeled '"+(postFilter+"' of "+postTitle.length+" posts total<br/></div>");tocdiv.innerHTML= c+b}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc";sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest";sortPosts(sortBy);displayToc(postFilter)}function showToc(){tocLoaded?(displayToc(postFilter),document.getElementById("toclink")):alert("Just wait... TOC is loading")} function hideToc(){document.getElementById("toc").innerHTML="";document.getElementById("toclink").innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">\u00bb Show Table of Contents</a> <img src="http://chenkaie.blog.googlepages.com/new_1.gif"/>'};
//]]></script><script src='https://www.YourBlog.com/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc' type='text/javascript'></script></div></div>
Step6: Replace yourblog.com with your blog URL.
Step7: Click on inside Search Description ➤ Under the page settings ➤ add page description ➤ Done.
You can see all the content of YOUR-WEBSITE-NAME on one page.

Step8: Click on options ➤ Under reader comments ➤ select Don't allow ➤ Then click on done.
Step9: Click on Click Publish.

Finally, your sitemap page is ready, and You can change the color of the table and background on this sitemap as you like.

Watch this tutorial as a video

You might like

2 comments

Post a Comment