How to Create Sitemap Page in Blogger Blog

this sitemap only for search engines, and this also good idea if you make a sitemap page for visitors too. You will be noticed that many bloggers created a sitemap page in their blog. This page helpful for visitors to easily reach a blog all articles as well as for search engine crawling bots to quickly index your blog posts. In this post, I would like to show how to create awesome CSS sitemap page in a blogger.

How to Create Beautiful CSS Sitemap Page in Blogger blog

1. Login to your blogger account

2. Go to create new page >> blank page. Write sitemap in the title

3. Paste the below code in HTML tab and publish the page.

<style>
 /* CSS Full Sitemap */
 #bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
 span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
 .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
 .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
 .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
 .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
 text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
 .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
 text-decoration:none;}
 .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
 .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
 .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
 #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
 .toc-entry-col1 {counter-increment:rowNumber;}
 #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
 td.toc-entry-col2 {background:#fafafa;}
 </style>
 <div id="bp_toc">
 </div>
 <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
 <style scoped="" type="text/css">
 #comments {display:none;}
 </style>

So friends you learned how to create a beautiful CSS sitemap page in blogger with help CSS. Well, I am waiting for your feedback in the comment section.