How To Add A Html Sitemap Page In Blogger

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.

Categorized/Labeled:

It shows your blog posts in a labeled manner. 

Screenshot:

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). Copy 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}
</style>

<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