Table of contents
- 1 MIUSM-TECH.COM - When visiting the Wikipedia site, you will definitely be presented with a list of article contents, where when clicked it will automatically go directly to the intended menu, the feature is called table of contents.
Table of Content or it can also be called a table of contents is very important in a blog post because it will make it easier for visitors to go directly to the menu they are looking for, especially in a very long article.
Besides functioning as a jump link in blog posts, Table of contents is also very useful for SEO. Because the menu will be indexed and appear on the Google search page.
If you want to apply this Table of Contents on your blog, it's quite easy, just using some CSS and HTML code.
Below is an example of the Table of Content that we will create:
Table of contents
Without further ado, let's look at how to create a Table of Contents for posts on blogger.
1. CSS code installation
First, you need to add this Table of Contents CSS code to beautify the appearance, Copy the code below above the closing tag </style> or ]]></b:skin>
/* Table of Contents */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h3 {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}
Notice the last line of code :target::before . If you use the sticky header/navigation menu, change the height and margin-top according to the size of the installed header/navigation. For example, the size is 50px, then change it to height:50px and margin-top:-50px .
2. Writing HTML code in Posts
Now we just apply to posts on blogger. Make sure you select HTML mode instead of Compose when creating a new post. Then save the code below at the beginning or where the Table of Contents is displayed.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
<li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
<li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
<li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
<li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a></li>
</ul>
</div>
#toc1, #toc2and so on is the calling tag. You can add or subtract as needed.
Then set the writing in the heading or title in the post by including the same id as the table of contents. Examples like this.
<h3 id="toc1">Judul Satu</h3>
...isi paragraf satu
<h3 id="toc2">Judul Dua</h3>
...isi paragraf dua
<h3 id="toc3">Judul Tiga</h3>
...isi paragraf tiga
<h3 id="toc4">Judul Empat</h3>
...isi paragraf empat
<h3 id="toc5">Judul Lima</h3>
...isi paragraf lima
3. Hide Table of Contents Menu
If you want the table of contents or table of contents to be hidden when loading, just add text checked on tags input as follows:
<input type="checkbox" role="button" id="toctoggle" class="toctoggle" checked><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
4. 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 example is like this:
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
And this is a WRONG example:
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"> <div class="toctitle"> <h3>Daftar isi</h3> <span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span> </div>
Maybe that's the post this time about Creating a Table of Contents in Blogger Posts , hopefully it's easy to understand and also useful.
See you....
See you....