Tricks to Add Html Auto Sitemap In Blogger

Tricks to Add Html Auto Sitemap In Blogger

 

Today I will show you how to add a new gadget know as sitemap menu. You might have seen this sitemap while surfing CityMedia.tk. 

 
If you haven't seen it before click here. Sitemap helps user 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. 

The Objective 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 maintenance 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 someday 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.citymedia.tk/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.citymedia.tk 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 infoalexablogs@gmail.com. Also share with others. Follow and subscribe for more tips, tricks,gadgets and widgets. 

Tricks to Add Html Auto Sitemap In Blogger