Install Table of Content in Blogger Post

Table of Content is a important part of Article. When we are writing an Article or Blogger post, there are many sections or contents (which we call as Headings and Sub heading) to write about. Table of content (TOC) is a table of these contents/sections. From TOC we can know about the contents of the article and also can jump to the content by clicking on the link.

Install Table of Content in Blogger Post

Did you know about Wikipedia? Its all Article has a Table of Contents and it is famous for that. It make the article rich and complete. Also, the TOC links are shown in Search results. That means it has great inpact on SEO.

Let's make a Table of Content in Blogger posts

You just have to put id in sub headings of post, which will work as "jump to the content" option. And you need some CSS to make the TOC look beautiful.

put the following CSS code just before

]]></b:skin>

/* Table of Contents by webmasterbn.xyz */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Note: Edit last line of this code namely :target::before If you use sticky header menu / navigation, change margin-top in accordance with the size of the header / navigation installed. For example, the size is 50px, then change it to height:50px and margin-top:-50px.

Now we will do the main part of the Table of Content for blogger post. Here we will create TOC code to put it in. Turn on HTML mode in blogger post editor and wite the following code according to you post contents (H2,H3 or H4 headings). Put the following code before first sub heading of your article/post.


<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
  <ul>
    <li>1 <a href="#toc1" title="Heading Title">Heading Title</a></li>
    <li>2 <a href="#toc2" title="Heading Title">Heading Title</a></li>
    <li>3 <a href="#toc3" title="Heading Title">Heading Title</a></li>
    <li>4 <a href="#toc4" title="Heading Title">Heading Title</a></li>
    <li>5 <a href="#toc5" title="Heading Title">Heading Title</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Heading Title">Sub Heading Title</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Heading Title">Sub Heading Title</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Heading Title">Heading Title</a></li>
  </ul>
</div>

So we just learned how to make table of content in blogger post. If you face any problem in case of applying the codes please feel free to comment below, i would love to solve your problem.