How to Create Sitemap / Table Of Contents in blogger? there are still many bloggers who still do not understand how to create a table of contents on their blog. So let us learn to create table of contents / sitemap and put it on your blog page.
Tutorial to create a sitemap / table of contents of this blogger I created based on that I apply in this blog. For that I give this tutorial so that you can apply them in your blog. To demo sitemap page that we will make, take a look at this blog Sitemap page.
Benefits of Create Sitemap / Table of Contents in Blogger
Table of contents page is very helpful to users, search engines, and the creator of the blog itself to explore the entire content of the website. Creating a sitemap or table of contents of a blog is also recommended by Google for making visitors feel comfortable when visiting blog, - because blog content is needed to be found easily. The table of contents of blog also improve seo (search engine optimization) because it contains all the internal links with keywords or anchor text that is really appropriate.How to Create Sitemap / Table Of Contents in blogger
1. Sign in to your Blogger Dashboard.
2. Select Pages in Blogger Dashboard, Then click "New page".
3. Enter the title of your page. example page title: "Sitemap".
4. On posts page, change Compose into HTML.
5.Then copy and paste the Css code below in the text editor.
5.Then copy and paste the Css code below in the text editor.
<div dir="ltr" style="text-align:left;" trbidi="on"><style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px #eee;}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}
.table-of-content .toc-header:hover{background-color:#fdfdfd;}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#fc4f3f transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fcfcfc!important;transition:initial;border-bottom:1px solid #e9e9e9;border-top:1px solid #fff;}
.table-of-content li:first-child(border-top:0}
.table-of-content li:last-child(border-bottom:0}
.post ol li a,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}
.post ol li a:visited{color:#999;transition:initial}
.post ol li a:link:hover,.post ol li a:visited:hover{color:#fc4f3f;text-decoration:underline;transition:initial}
.post ol li:before{display:none}
ol {text-shadow:initial;}
.post a:link {color:#444!important;}
</style>
<div class="table-of-content" id="table-of-content"><span class="loading">Loading...</span></div><script>
var toc_config = {
url: 'https://kaizeblog.blogspot.com/',
containerId: 'table-of-content',
showNew: 5,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fc7569;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">New</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 0,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>
Information :
Change Url marked in yellow above:
https://kaizeblog.blogspot.com/ with your blog URL.
6. Then click Publish to publish your page.
7. Finally, click View to see the results on the page that you create.
Above is a tutorial on how to create a sitemap or table of contents in a blogger, I hope this article helpful.
EmoticonEmoticon