How to Create Site Map page for Users/visiters on Your Blogspot Blog

site map widget for blogger

An easy way to create site map for your (blogspot) blog with just copying this below code and paste it into a new statistic page and then add the Site map page url to the Main menu or locate it on any where you want on your blog.
When your visitors clicking on that link they will be on a site map page with all your blog posts with titles and url addresses under their labels or tags and whenever you create a new post on your blog it will be added automatically and marked as NEW..
Personally I'm using this code, You can see on this image..

Create your site map page on your blog

when you create a new post, its usrl address will be created automatically and you can change to whatever you want at any time but this is not possible for statistic pages, when you create a page and its url created you cant edit it unless you remove it and re-create a new with your desired url address..
To make your site map page url address like this and not like this just do this:

1. Login to your Blogger account, then go to Pages then select New page.
2. In Page title field type SiteMap.
3. Then save ..
its address will be (check it) or publish this page and click on view if you get the desired url it's ok., if not you can delete it and create another page with your desired url address because there's no way to edit its url address after it has been created..
               Then continue >>..
4. On your left side click setting and disallow comment and make Search Description..
5. Then you need to Switch to HTML mode.
6. Clear this field and then copy the code below and paste it there..
7. Publish your Site Map page for your visitors..
site map

How To Get .Com Domain NameTLD For Your Blog With Less Than One Dollar

html site map for blogger

Copy this code and paste it on site map page:

<style type="text/css">
.post-archive {width: 100%;padding: 20px 0;text-transform: capitalize; font-family:serif;}
.post-archive h4 {border-bottom: 2px solid #EEEEEE;color: $(coior:theme);font-size: 30px;font-family:serif;margin: 0 0 10px 2px;padding: 0 0 10px;text-transform:uppercase; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p {padding: 5px 0px;
 -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; box-shadow: 0 8px 35px 0      rgba(10,100,210,0.0), 0 6px 42px 0 rgba(0,0,0,0.200);}
.ct-columns-3 p a {background: #fafafa; color: #1843f2; display: block; border: 2px solid #FFFFFF; font-size: 16px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #ffffff; color: #ff0000; }
.ct-columns-3 p a:visited { background: #ffffff; color: #fa00ff; }
.snote { font-size: 14px; color: rgb(200, 200, 200); text-align: right; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 2; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 2; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 2; column-gap: 10px; column-rule: none; } }
@media screen and (max-width: 550px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; }  .snote { display: none; } }
<script src='' type='text/javascript'></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

So now this code you can create a site map page on your blog for users, all posts will be listed there under there labela/tags, remember to add a link on your main menu, on footer widget or any where..