Add A Pretty Site Map to Blogger

This is an updated code to create a sitemap or Table of Contents

.

This is a cool sitemap for your blog. It's  an index with all of your posts .This is highly recommended for Blogger users.  It helps them to navigate easily around your blog.  I know we offer  navigations menus, in addition to the search button.  However this lists all of your posts together on one page.
Below is an example of what you will see...Of course this is mine, so it will shows your posts.

If someone wants to see all of your posts, they are listed as an index page, like a table of contents.
Whenever you write a new post with labels, they are added to this.  There is no need for you to do anything else.

To achieve this:  Create a new page and name it Sitemap or Table Of Contents

Click the HTML portion of the page and paste this code below in there.

<style scoped="" type="text/css">#bp_toc {background:#DC82BA;color:#666;margin:0 auto;padding:5px;}span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';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:'Trebuchet MS';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;}#comments {display:none;}</style>  
<div id="bp_toc" style="max-height: 1200px; overflow-x: auto; overflow: scroll;"></div><script src="https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.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>

Click publish.  View your page to see what it looks like and grab the url.

If you want to customize the color, you  look for this for the background: 

#bp_toc {background:#DC82BA;
Change #DC82BA to whatever color you want.

To change the hover color: Look for this:
.toc-entry-col3 a:hover{color:#E018E2;}
Change the #E018E2 color to what suits you.

If you are using pages for your blog navigation, then you can add the sitemap to your menu.

 Open your page widget near your Header.  Get the nurl of the sitemap page you just created and paste in where it says Web address URL.

 This is your page list with the added Sitemap.

Sign up with your email address to receive the latest updates straight in your inbox.

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.