Table of content


 Wikipedia is famous for one feature called the table of contents or it can also be called the table of contents. But it's not just an ordinary table of contents, because when clicked it will automatically jump to the intended menu, aka jump link. Of course, this makes it easier for visitors because they can go directly to the menu they are looking for. Especially if the article is super long which makes me sore if you keep scrolling.

And the Wikipedia table of contents can be made for bloggers. Not just styles and make the appearance more attractive, but there is one big benefit from the SEO side. These menus will be indexed and appear in search results. This is called the jump link earlier.

Here is example of it:



The script is very light because it is only made using CSS and HTML. No need for Javascript so it doesn't add to the load when loading.

How to Create a Table of Contents (TOC) in Blogger Posts

It will read the heading id in the HTML structure and jump directly to the selected heading. Confused? Just practice so it's easier to understand.

To beautify the appearance, first add the following CSS code ABOVE the closing </style> OR  ]]></b:skin>.


/* Table of Contents by xandertech.com.ng*/
.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:'Hide';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Show'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Notice the last line of code, namely:target::beforeIf you use a sticky header/navigation menu, change its height and margin to match the size of the installed header/navigation. For example, the size is 50px, then change it to height:50pxand margin-top:-50px.

Now go to the main part, which is creating a table of content table of content in Blogger postsWhen creating a new post, make sure to select mode HTML, NOT Compose. Then save this code in the first paragraph.

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

#toc1 and another #toc is the calling element. You can add or subtract as needed.

Next, arrange the writing of the heading or title in the article by including the same id as the table of contents. Examples like this.

<h2 id="toc1">Heading 1</h2>
... paragraph 1

<h2 id="toc2">Heading 2</h2>
... paragraph 2

<h2 id="toc3">Heading 3</h2>
... paragraph 3

<h2 id="toc4">Heading 4</h2>
... paragraph 4

<h2 id="toc5">Heading 5</h2>
... paragraph 6

<h3 id="toc5_1">Five of first</h3>
... paragraph line part 1

<h3 id="toc5_2">Six of First</h3>
... paragraph line part 2

<h2 id="toc6">Six to six</h2>
... paragraph 6


For a demo or preview, you can check on igniel Codepen


If the 'Hide/Show' Button Doesn't Appear

This problem occurs frequently to most of the users. To fix this, make sure NOT to put a line break <br/>(enter) in the TOC header section. The correct one should be like this:

<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>

And here's a WRONG example:

/* THIS IS WRONG, DO NOT USE LINE BREAK */
<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>

A few tutorials on making a table of contents in blog posts such as the Wikipedia table of contents. Hopefully, it can be understood easily. And it's a good idea to use this TOC only on long posts. Because if it's short, it's annoying, people just have to scroll, how come they have to use jump links. So it doesn't sound good. If all posts want to be added TOC, then multiply the number of words for each article.

Xander | Author

    Get our latest blog updates in your inbox

    Post a Comment

    -Advertisement-

    - Sponsored-

    -Advertisement-

    Recent Posts