Beautiful Sitemap or Table of Content For Blogger

A Blog site become popular by their unique content. And if your site has more unique content then your Blog will be more popular. On the other hand, visitors love to see huge content in a site thus they get everything from one site. So Blogger should cover all types of topic thus visitors don't leave your site after landing within 1 or 2 minutes. There are many site those are designed horribly. Because site is not user friendly. And to make a site user friendly, your site must contain easy navigation and search options. But Blog visitors don't often like to search the content because some users hasn't any up-to-date idea about latest release. So in this case if they visit entire Blog site then they will  get an idea about the content. But this is not possible for all users. So to solve this issue Sitemap or Table of Content works like magic. because a visitor can see all content on any Blog at a time and they can search their preferred content.

Generally a Sitemap or Table of Content display the total number of posts in a site thus visitors can easily navigate to desired content. There are many Blog visitors those who don't like to view every post part by part and they feel interest by reading the Content headlines only. So Sitemap or Table of Content widget is ideal for those kinds of readers. In addition this sitemap has several benefits. Such as follows-

• Visitors can see all posts at a glance.
• Visitors can Easily navigate in any post.
• Not any extra loading time required.
• Your site will looks like professional

In this article I am going to share a beautiful Sitemap or Table of Content which is really professional. And it will load instantly. However don't worry about loading time because it will load instantly. Generally ideal place for sitemap is Blogger page. For this reason, I will show you about adding Sitemap or Table of Content in a Blogger page. So to add this Sitemap or Table of Content widget please follow the below steps-

Step 1 Sign in to your Blogger account and go to Dashboard

Step 2 From the Dashboard, click New page from Pages tab.

Step 3 After that now switch Compose view to HTML view and paste the below code.

<style scoped="" type="text/css">
#bp_toc {background:#008CDB;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://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>

Customization

• To adjust the page height please alter max-height:1200px with greater or lesser pixel number.
• To change the table header and border color please change background:#008CDB;. you can get the color code from our Color Picker.

Step 4 And now simply click on Publish button from top right corner. 

Now check your Sitemap or Table of Content page and see this will show all the post's headline, Post date and label of your Blog.