How To Make A Scroll Able Table-Based HTML Sitemap on Blogger

Visitors are the life of a website and the visitors will love the website if the site has unique content. Nobody likes copy contents, even search engine crawlers also dislike a website which has copy contents. First of all, you will need to add some unique content/articles on your website to get organic traffic from search engines. You can get organic traffic from search engines by posting unique and useful content but to make visitors visit your site again, you will need to make your website easily navigatable.
Search engines and people also don't love websites that have difficult navigation and have a bad design or have a very gorgeous design. Most of peoples love a website that has easy navigation and good, simple design.
An XML sitemap can help the search engine crawlers to crawl your website properly and an HTML Sitemap can help your visitors to navigate the website easily. It will very helpful to visitors if your site has a beautiful and easily understandable HTML Sitemap. The sitemap will help the visitors to find his desired article/content from your site. Though your site has a Search option, some people don't like to search.
So, in this case, an HTML Sitemap can work very well. Also, the HTML sitemap will be indexed by search engines and it will increase your rank in search results slowly. So, it is good to have a sitemap. Because a visitor can find his desired article and can navigate the site easily.

Read: How To Make An HTML Sitemap For Blogger

The scroll able table-based sitemap, that we are going to make will contain a beautiful table of your all blog posts on a page. All the posts of your blog will be organized under three sections, which are:
1. Post Title
2. Post Date
3. Labels

Advantages:

1. All posts will be furnished in a good table form.
2. Visitors can easily navigate to any post of your site.
3. No extra loading time.
4. You can change the table color.
5. Your site will look premium.

In this tutorial, I am going to show you how to add a beautiful scroll able table-based HTML sitemap on your blogger blog. The Sitemap will not take any extra loading time. So, don't worry about slowing down your site. To add the Sitemap on your site kindly follow the instructions below.

Step 1. Login to your Blogger dashboard.
Step 2. Navigate to Pages and click on New Page. Write Sitemap in the page title. Now paste the following codes.

<style scoped="" type="text/css">
#bp_toc {background:#52d017;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:scroll;overflow-x:auto;">
</div>
<script src='https://dl.dropboxusercontent.com/s/j698nlscrali4on/Sitemapfunction.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>

Note: If you want to change the color, change background: #52d017 with your desired color code.

Step 3. Now click on Publish.
Congratulations, you have successfully made the scroll able table-based HTML Sitemap on your blogger blog.
Now visit the Sitemap page and see the magic.