Professional Sitemap or Table of Content For Blogger

Blog site becomes popular with 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 the topic thus visitors don't leave your site after landing within 1 or 2 minutes.
Many sites are designed horribly. Because the 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 haven't any up-to-date idea about the latest release. So in this case, if they visit the 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 the desired content. Many Blog visitors don't like to view every post part by part and they feel interested by reading the Content headlines only. So Sitemap or Table of the Content widget is ideal for those kinds of readers. Besides, this sitemap has several benefits. Such as follows

• Visitors can see all posts at a once

• Visitors can easily navigate in any post.

• Your site will look like professional

In this article, I am going to share a beautiful Sitemap or Table of Content which is really professional and personally, I am using this Sitemap. And it will load instantly. Generally ideal place for a sitemap is the 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 its very easy and cool so Let's Start

Step 1. Sign in to your Blogger Account and go to Dashboard

Step 2. From the Dashboard, click New Page >> Page

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

<style scoped="" type="text/css">
#bp_toc {background:#f2132d;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:#f2132d; you can get your favorite color code from Eye Drop Chrome Extention Tool.

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

Now check your Sitemap or Table of the Content page and see this will

show all the post's headline, Post date, and label of your Blog.

All Done! You have successfully created Sitemap or Table of Content For Blogger. So simple is that! If you feel any difficulty or have any queries, simply drop a comment.

Tags: sitemap page for blogger,sitemap for blogger,how to create sitemap for blogger,blogger sitemap,how to create xml sitemap for blogger,sitemap,blogger,html sitemap page for blogger,create sitemap page for blogger,create sitemap for blogger,blogger sitemap page,sitemap generator,sitemap page,how to create sitemap for blogger blog,how to add sitemap page in blogger,blogger (website)