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

site map widget for blogger

An easy way to create site map for your (blogspot) blog with this below code, copy and paste it into a new static web page and then add the Site map page url to the Main menu or locate it 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.
chek this site map page to see it life if not updated, this page was created before this post is published

Create your site map page on your blog

when you create a new post, its url 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 https://link2app.blogspot.com/p/site-map.html which the words "site map" friendly url address and not default one like this https://link2app.blogspot.com/p/blog-page-189.html just do this:

1.Login to your Blogger account, then go to Pages then select New page.
2.In Page title field type site-map. or make them one "sitemap"
3.Then save ..
its address will be https://link2app.blogspot.com/p/site-map.html (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 widget

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 on your blog: you can customize css style as you like, and remember to substitute "link2app.blogspot.com" with your own blog address.

<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: #5b5100; 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: #5b5100;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;}} </style> <script src='//cdn.jsdelivr.net/gh/cdnspot/sitemap.min.js' type='text/javascript'></script> <script src="//link2app.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"> </script>

This code is only for blogger blogs (blogspot websites) based on blogger tags and labels, replace example.com with your blog address .

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

Protect your content with a DMCA.com Protecion Badge
See More Info