Blogger widgets

How To Add A Html Sitemap Page In Blogger

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="" type="text/javascript"></script><script src=";alt=json-in-script&amp;callback=loadtoc"></script></div>

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

(5). Now change the 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 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 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

    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.

  4. please check my blog i have tried different sitemap codes but the pae still remains blank i dont why

    1. There may be some problem with loading the page because I can't see blank page. I can see the sitemap working fine

  5. salam!! i added the code but got empty page says Mixed content of http and https connection...plz check my blog @

    1. Did you reply the URL of your blog ? If yes and you are getting the error just dismiss it and publish your page.

  6. hi fahim
    thx a lot . your post was really helpful . since morning i was trying this and visited so many sites but none of them worked . yours just worked without any hassels. thanks once again.

    1. Thanks for feedback veena, keep visiting and sharing :-)

  7. Hi Fahim

    I have tried very think i could to get the sitemap to work on my blogger and yet it shows blank. I use blogger but I redirected to custom domain and my url is

    can you help me out please

    you can contact me via