How to Create a Table of Contents on a Blog

Creating a table of contents page on the blog is very important, because it can make it easier for visitors to know all of our posts on the blog in accordance with the label made. So blog visitors can browse posts that have been uploaded based on the label.

Not only that, this table of contents can also help our blog be found on google. This means, the table of contents can also help maximize SEO on a blog.

For example, you can see the contents page of my blog here. So, there are many types of table of contents pages that you can create. You can also make degan tables too. The contents page that I made is very responsive, so it's easy for readers to read.

Therefore, if you want to install a table of contents page on your blog, you can follow the method below.

How to Create a Table of Contents on a Blog

• VERSION 1

First, you must create a new page first, go to blogger dashboard menu, then select the page and create a new page. Select the HTML section. Not Compose.

Then, copy all the code below, and paste it on the page.

<div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.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>
<style scoped="" type="text/css">
#comments,#Label1,#FollowByEmail1 {display:none;}
#HTML3 {visibility:hidden;}
/* CSS Full Sitemap */
#bp_toc{background:#31a2db;color:#666;margin:0 auto;padding:4px;}
span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:rgba(255,255,255,.5);font-size:1.6rem;text-transform:uppercase;font-weight:700;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;}
#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);}
#bp_toc tr:nth-child(1) a {color:#666;}
#bp_toc td.toc-header-col1{background-color:#fff;}
#bp_toc td.toc-header-col2{background-color:#fff;}
#bp_toc td.toc-header-col3{background-color:#fff;}
#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0}
#bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700}
#bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8}
#bp_toc td.toc-entry-col2{background-color:#fff;}
#bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8}
#bp_toc td.toc-entry-col3{background-color:#fff;}
#bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8}
#bp_toc td a{color:#666;}
.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:&#39;Roboto&#39;;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:#cdb280;}
#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;}
</style>

Then you preview first to check the contents of the contents list whether it has been successful or not. If so, please publish.Then you will see the results as shown below.

• VERSION 2

If you want to use a different version, you can use the code below.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<script src="https://cdn.staticaly.com/gh/Arlina-Design/redvision/master/daftsimple.js"></script><script src="/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>
</div>

The results of the table of contents version 2, you can see below.

You can use one of the two table of contents codes above. The table of contents code above is very responsive. Can be loaded via mobile or desktop.

Then you can publish the table of contents and save in the bottom widget so that it is better and does not disturb visitors.

Share :