Table Of Content (TOC) Valid AMP

Table Of Content (TOC) Valid AMP, Table Of Content (TOC) / Daftar isi merupakan hal penting bagi saya sendiri karna jika ada ini kita jadi lebih mudah untuk meilihat poin poin dalam sebuah artikel mempermudah juga para pembaca.

Table Of Content (TOC) Valid AMP

Akan tetapi jika kalian yang ini menggunakan TOC tapi valid AMP kalina bisa coba gunakan script di bawah ini di setiap postingan kalian.

Script Table Of Content Valid AMP

<style>
    /* Table Of Content by https://untilendd.com/ */
    #toc_wrapper {
       background:#ddd;
       max-width:450px;
       position:relative;
       padding:10px;
       border-radius:4px;
       margin:20px 40px;
    }
    .tombol_toc {
       position: relative;
       font-weight: bold;
       outline: none;
    }
    .tombol_toc svg {
       float:right;
    }
    #daftarisi {
       background:#fff;
       padding:10px 10px 0;
       border-radius:4px;
       margin-top:10px;
       -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.05);
       box-shadow:0 2px 15px rgba(0,0,0,.05);
    }
    #daftarisi a {
       text-decoration:none;
    }
    #daftarisi ul {
       padding:0 0 0 20px;
       margin:0
    }
    #daftarisi ul li.lvl1 {
       line-height:1.8em;
       padding:4px 0;
    }
    #daftarisi ul li.lvl1:nth-child(n+2) {
       border-top:1px dashed #ddd;
    }
    #daftarisi ul li.lvl1 a {
       font-weight:600;
    }
    #daftarisi ul li.lvl2 a {
       font-weight:400;
    }
    #daftarisi ul li a:hover {
       text-decoration:underline;
    }
    :target::before {
       content:"";
       display:block;
       height:40px;
       margin-top:-40px;
       visibility:hidden;
    }
</style>

Untuk memanggil nya kalian bisa gunakan kode di bawah ini dan sesuai kan dengan sub judul kalian pada setiap artikel.

<div id="toc_wrapper">
<div class="tombol_toc" on="tap:daftarisi.toggleVisibility" role='button' tabindex='0'>DAFTAR ISI <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
    <div id="daftarisi">
    <ul>
      <li class="lvl1">
        <a href="#toc1" title="Contoh 1">Contoh 1</a>
           <ul>
             <li class="lvl2"><a href="#toc1_1" title="Contoh 2">Contoh 2</a></li>
             <li class="lvl2"><a href="#toc1_2" title="Contoh 3">Contoh 3</a></li>
           </ul>
      </li>
      <li class="lvl1"><a href="#toc_2" title="Contoh 4">Contoh 4</a></li>
      <li class="lvl1"><a href="#toc_3" title="Contoh 5">Contoh 5</a></li>
    </ul>
</div>
</div>

Ini bisa kalian di blogspot maupun di wordpress bisa kalian gunakan juga untuk kalina membuat landing page tinggal kalian sesuaikan.

Kesimpulan

Bagi kalian yang masih menggunakan blogger tentunya kalian harus manual juga ingin menggunakan TOC ini akan tetapi bagi kalian pengguna wordpress itu sangat lah mudah kalian tinggal download plugin TOC yang sudah banyak tersedia akan tetapi terkadang itu tidal valid AMP

Sebagai alternatifnya kalian bisa gunakan script di atas agar website kalian valid AMP menggunakan TOC ini, tapi itu juga kembali lagi kalian jika tidak masalh dengan amp kalian bisa gunakan plugin saja bagi pengguna wordpress.