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

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

An easy way to create site map page 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.
check 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 when the words "site map" create a friendly url address and not default one 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 site-map. or make them one "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 >> .

  • On your left side click setting and disallow comment and make Search Description.
  • Then you need to Switch to HTML mode.
  • Clear this field and then copy the code below and paste it there.
  • Publish your Site Map page for your visitors.
site map widget
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 "" 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='' type='text/javascript'></script> <script src="//"> </script>

This code is only for blogger blogs (blogspot websites) based on blogger tags and labels, replace 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 labels/tags, remember to add your page link on your main menu, on footer widget or any where on your blog.