How to create a HTML Sitemap Page for Blogger Blog Posts

A Sitemap is only a depressed page of available pages in your site. Sitemap helps search crawlers like Google, Yahoo and Bing to smoothly crawling and indexing pages in your website which helps in better list. As a blogger you must make a sitemap page as well as xml sitemap to submit Blogger Blog sitemap to Google Webmaster Tool or other webmaster tools. So whatever point you make another post web search tools can crawl and list them effortlessly. In this post we should observe how to make a HTML sitemap page for Blogger blog.

Why HTML Sitemap?

Simply we can list all blog post in a blogger page using JavaScript in ascending or descending order for our blog readers so they can easily reach on blog post. The html sitemap also help to increase blog page rank.

Default Blogger sitemap:

Naturally your blogger blog have a sitemap, yet the issue with that sitemap is it just demonstrates your late blog entries. An impeccable sitemap is that it ought to contain the rundown of all you pages so that web crawlers know the complete structure of your blog.

So you can list all of your blog posts in a single sitemap page or you can categories your sitemap page according blog labels.

Creating a Simple HTML Sitemap Page that lists all Blog Posts:

If you want to show all of your blog posts at same page then follow below steps one by one.

Go to your blogger blog.

Now Navigate to Pages >> New Page >>Blank Page.

Switch it to HTML mode.

Paste below code in the post body.

<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>
<ul>
<script src=”http://your blog url /feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999″></script>
</ul>

Creating a HTML Sitemap Page that Categories Blog Labels:

If you want to list blog posts according blog labels, then instead of the above code, use below code.

<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://blog url here/",
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>