Easy Steps To Create An Html Sitemap Page In Blogger

Sitemap of a blog/website helps posts get index to search engines easily and search engines generates traffic which is very important for a blog/website to survive.
But before we proceed lets know the benefit of an Html Sitemap page or Table of Content page.

Html sitemap page make it easier for users to navigate your site or blog content, same with S.E bots. They get to index your content faster.

I have previously written a post on How to Submit Blogger Sitemap to Google Webmaster Tools, and that sitemap is created in .xml format which is perfect for search engines but if you want your readers to access sitemap page which gives them accessibility to easily select a post to read then you must create HTML sitemap page.

How To Create Sitemap Page for Particular Labels
This will only show posts from specific labels.

<@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(‘

’); document.write(posttitle);} if (standardstyling) document.write(‘

’); }

<@script src=” http://www.yourwebs ite.com/feeds/posts /default /-/Label%20Name?or derby=published& amp;alt=json- in-script& amp;callback=showre centposts& amp;max- results=999″> <@/ul>

Note: Remove all @ in code.
Important: If your labels are single word like “SEO” then put SEO there but if your label has more than one word, then put %20 between each word.

For example: if the label name is Blogger Tips, then put Blogger%20Tips Label name is case sensitive. So if your label is SEO (all capital letters) don’t put seo (in small letters).

How To Create Sitemap for All Labels This will show posts from all labels.
1. Open your blogger panel/admin panel
2. Go to Pages > New Page > Blank Page
3. Switch to HTML mode
4. 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(‘

’); document.write(posttitle);} if (standardstyling) document.write(‘

’); }

<@script src=” http://www.blo ggertipstricks .com/feeds /posts /default?orde rby=published & amp;alt=json- in-script& amp;callback= showrecentpo sts& amp;max- results=999″> <@/ul>

Note: Remove all @ in Code.
5. Click Publish !.
6. Its done, you've successfully created an html sitemap for your blog!

If you find this helpful make sure you share it. For any questions and queries leave comments.

Reccommended: How To Submit Sitemap To Google Webmaster Tools In Blogger