X Close
T Wednesday, August 20, 2014

How to add a html sitemap page in blogger

fahim raza 7 Comments so far
Adding a sitemap/menu page to your blog your-blog-link | 101Helper : Blogger tips, blogger tricks, blogger gadgets / widgets, blogger help

Recently I have shared a gadget which is a globe like revolving categories or labels, today I am back with a new gadget. It is sitemap/menu. You might have seen the sitemap/menu while surfing 101Helper.
If you haven't seen it before click here. Sitemap helps users to find all the posts of a blog on one page, in other words it is a navigation page. It also helps in seo by linking all the posts on one page in list view. It also helps search engines to index the sitemap of your blog where a visitor can find all the posts easily. 

Features of sitemap:

A good Look:

It has a simple, neat, clean and a broad look. It represents all the posts of your blog in list view.

Navigation page:

It acts as a navigation page in your blog as it contains all the posts of your blog in list view.

No maintainence needed:

You don't need to maintain the sitmap. It works automatically when you post a new article it will index it and mention (new) with it and after somedays the (new) will disappear automatically.


It shows your blog posts in a labeled manner. 


Adding a sitemap/menu page to your blog your-blog-link | 101Helper : Blogger tips, blogger tricks, blogger gadgets / widgets, blogger help

How to add this widget?

Follow the below steps to add a sitemap/menu page to your blog:

(1). Go to blogger and login to your account.

(2). Go to pages tab and create a new page. Give it a title either Menu or sitemap.

(3). C
opy the below code.

<style type="text/css">#toc{width:99%;margin:5px auto;border:1px solid #dddddd;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}.labl{color:#eb3131;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#eb3131 0%,#eeeeee 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#eb3131),color-stop(1,#f06060));border:1px solid #transparent;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}.labl a{color:#fff;}.labl:first-letter{text-transform:uppercase;}.new{color:#444444;font-weight:bold;font-style:none;}.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#eeeeee));}.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}

<br /><div id="toc"><script src="https://rawgit.com/101Helper/docs/master/sitemap.js" type="text/javascript"></script><script src="http://www.your-blog-link.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

(4). Paste the copied in the Html tab of the page

(5). Now change the http://www.your-blog-link.blogspot.com and replace it with the link of your blog.

(6). Save the page and visit your blog.

Note: If you haven't labeled your posts then this sitemap won't work, so label your posts while writing a post otherwise you will see an empty sitemap or an empty page.

If you have any problem related to this gadget ask me in comments or E-mail me at fahimraza101@gmail.com. Share with others. Follow and subscribe for more tips, tricks,gadgets and widgets. 

Search Tags: sitemap for blogspot,sitemap page in blogger,how to add sitemap to blogger, how to add a sitemap in blog,101helper blogger widgets and gadgets, tutorials


  1. Hey there,

    Thanks a lot for this amazing content. However, I did do all the above but my sitemap page is empty... :S

    1. Did you replace http://www.your-blog-link.blogspot.com with your blog link? if not then do it and it will start working. If instead of replacing link it doesn't work try this sitemap in your blog http://101helper.blogspot.com/2015/02/stylish-sitemap-for-blogger.html

    2. I saw your blog(lifeprinciples4you) and I have figured out that your sitemap isn't showing any link because you haven't labeled any of your post, try to label posts first and after that reload your sitemap page, it will start showing posts.

    3. Oh is that why? so let's say I have a post titled "patience is strength" what could I label it?

    4. You can label it as "Tips to be happy in life" or "Benefits of patience" or anything you like, actually you have to just categorize it if you want to show links in sitemap..

  2. Btw.. also what do you think of my blog fahim? How about we promote each other's blogs using back-links or other methods because honestly your blog is really helpful and we could traffic for each other...

  3. Yeah why not +Admin - salah, you can leave your link here in comments, it will work as a back-link. And you have a nice blog.