This feature is a Wikipedia feature called table
of contents. But it is not just a regular table of contents, because when clicked on it will automatically jump to the destination menu. Of course this makes it easier for visitors because they can directly go to the menu sought. Especially if the article is super long which makes it hard to keep scrolling.
Add this code to css
Preferably add the code before the
</style> Or ]]></b:skin> tag. /* Table of Contents by igniel.com */
.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 the last row of the code that
s target: :before. If you use the sticky header / navigation menu, change its height and margin-top to match the size of the mounted header / navigation. For example the size is 50px, then
change it to height: 50px and
margin-top: -50px.
Add this code to the page where you want the table of contents to display and edit texts accordingly.
<div class="toc"><input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Jump To</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div><ul><li>1 <a href="#toc1" title="How to Implement Light and Dark Mode on Blogger">How to Implement Light and Dark Mode on Blogger</a></li><li>2 <a href="#toc2" title="Final words">Final words</a></li></ul></div>NOTE: You must not switch to compose mode while doing this otherwise there will be an error in the html code
Lastly use this below code to specify your jump to position
<h2 id="toc1">
Judul Satu</h2>
<h2 id="toc2">
Judul Dua</h2>
<h2 id="toc3">
Judul Tiga</h2>
<h2 id="toc4">
Judul Empat</h2>
<h2 id="toc5">
Judul Lima</h2>
<h3 id="toc5_1">
Sub Judul Lima ke Satu</h3>
part 1
<h3 id="toc5_2">
Sub Judul Lima ke Dua</h3>
part 2
<h2 id="toc6">
Judul Enam</h2>