Membuat Daftar Isi (TOC) Di Dalam Postingan Blog Valid AMP

Kak Her

Membuat Daftar Isi Di Dalam Postingan Blog Valid AMP

www.LingkarBerita.comDaftar isi atau biasa dikenal dengan Table Of Content (TOC) memang sangat penting untuk hadir di dalam sebuah artikel, apalagi jika artikel yang di buat itu menjelaskan banyak hal.

Biasanya daftar isi hanya hadir di sebuah makalah atau skripsi, ternyata penerapan daftar isi ini juga bisa di terapkan pada sebuah artikel Blog.

Saat ini sudah banyak orang – orang yang kini beralih, yang dulunya hanya menulis sebuah cerita atau naskah dalam sebuah kertas atau buku, kini menggunakan blog sebagai medianya.

Tentunya untuk menulis sebuah naskah yang panjang dalam sebuah artikel di blog, akan sangat penting jika menggunakan Daftar Isi untuk mempermudah pembaca dalam memahami konsep tulisan.

Semakin berkembangnya teknologi di bidang blogger ini, kini dikenal yang namanya Accelerated Mobile Pages yang di singkat AMP. AMP sendiri mempunyai kelebihan memuat artikel dengan sangat cepat, berbeda dengan blog yang tidak menggunakan AMP.

Pada blog AMP, penerapan Table Of Content atau Daftar isi di dalam artikel tentu berbeda dengan blog yang tidak menggunakan AMP.

Di sini, saya akan mencoba memberikan tutorial cara Membuat Daftar Isi Di Dalam Postingan Blog Valid AMP yang tentunya dengan tampilan keren dan modern. Namun sebelum itu saya akan menjelaskan sedikit mengenai apa itu Table Of Content.

Mengenal Table Of Content Pada Blog

Tak perlu jauh – jauh untuk melihat seperti apa sih Daftar Isi di dalam postingan blog itu ?

Kalian bisa melihatnya di atas. itu adalah Table Of Content (TOC) yang saya terapkan pada blog ini, dan itu juga yang akan saya bagikan ke pada kalian pembaca setia blog ini.

Baik, kita mulai bahas satu per satu.

Apa itu Table Of Content ?

Table Of Content atau lebih dikenal dengan nama Daftar Isi di dalam blog adalah sebuah elemen yang sangat penting untuk membantu pembaca dalam memahami struktur penulisan artikel. Biasanya TOC ini hadir di dalam artikel yang memiliki konten atau penjelasan yang panjang, sehingga membutuhkan Daftar Isi untuk memahami struktur penulisan artikel.

TOC pada blog ini berbeda dengan yang biasanya kalian temukan di dalam sebuah buku atau makalah, TOC pada artikel blog lebih baik, karena adanya fitur jump to target yang berfungsi mengarahkan pengunjung secara langsung ke header judul yang ingin di tuju dengan cara, hanya mengklik judul pada Daftar Isi yang tersedia.

Dengan begini pengunjung tidak perlu repot lagi untuk melakukan scroll untuk mencari penjelasan yang di butuhkan.

Kenapa Harus Menggunakan Table Of Content (TOC)

Kalau di tanya kenapa.

Pastinya karena dengan adanya TOC akan memudahkan pembaca dalam menemukan penjelasan – penjelasan tertentu dalam sebuah artikel. Dan lebih mudahnya lagi, pembaca hanya mengklik salah satu judul pada Table Of Content untuk menuju ke penjelasannya langsung tanpa harus membaca penjelasan yang lain.

Karena biasanya dalam penulisan artikel, penulis terlalu banyak menuliskan penjelasan yang menurut pembaca itu tidak terlalu penting. Jadi cukup dengan melihat daftar isi, pembaca bisa langsung menuju ke penjelasan yang mereka butuhkan.

Seperti halnya pada artikel ini, saya banyak membahas penjelasan yang tidak begitu penting dan menyelipkan penjelasan utama di urutan terakhir. Benar kan ? hehehe

Cara Membuat TOC Untuk Blog AMP

Oke, langsung ke intinya. Untuk membuat Table Of Content di dalam postingan yang valid AMP ikuti instruksi berikut ini.

Pertama, silahkan tambahkan CSS berikut di bawah <style amp-custom> pada template blog kalian.

/* Table Of Content by idnxmus.com */
#toc_wrapper {
   background:#ddd;
   max-width:450px;
   position:relative;
   padding:10px;
   border-radius:4px;
   margin:20px auto;
}
.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;
}

Jika kalian menggunakan Sticky Menu, silahkan ubah nilai pada CSS yang di beri tanda berwarna kuning height:40px; dan margin-top:-40px; sesuai tinggi dari Sticky Menu pada blog kalian. Jika tidak menggunakan Sticky Menu, silahkan hapus CSS pada baris terakhir tersebut.

Kemudian, masukkan kode HTML di bawah ini kedalam postingan artikel kalian untuk menampilkan Daftar Isi dari artikel yang kalian buat. Biasanya penempatannya setelah paragraf pertama.

<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="Aliquam pulvinar bibendum mauris ut molestie">Aliquam pulvinar bibendum mauris ut molestie</a>
       <ul>
         <li class="lvl2"><a href="#toc1_1" title="Aenean dapibus elit et quam vestibulum">Aenean dapibus elit et quam vestibulum</a></li>
         <li class="lvl2"><a href="#toc1_2" title="Donec cursus lacus diam">Donec cursus lacus diam</a></li>
         <li class="lvl2"><a href="#toc1_3" title="Donec id dolor quis ipsum hendrerit">Donec id dolor quis ipsum hendrerit</a></li>
       </ul>
  </li>
  <li class="lvl1"><a href="#toc_2" title="Mauris dapibus blandit ipsum a aliquet">Mauris dapibus blandit ipsum a aliquet</a></li>
  <li class="lvl1"><a href="#toc_3" title="Praesent dignissim purus a purus accumsan facilisis">Praesent dignissim purus a purus accumsan facilisis</a></li>
  <li class="lvl1"><a href="#toc_4" title="Integer at pellentesque tortor">Integer at pellentesque tortor</a></li>
</ul>
</div>
</div>

Ubah judul dan title di setiap baris dari contoh HTML Code diatas sesuai dengan judul yang kalian butuhkan.

Selanjutnya
buatlah header di bagian paragraf dari setiap penjelasan kalian. Misalnya saja saya beri contoh seperti ini. <h4 id="toc_1">Aliquam pulvinar bibendum mauris ut molestie</h4>

Contoh di atas, saya menggunakan tag <h4> sebagai header di setiap penjelasan saya. Kalian juga bisa menggunakan tag <h3>, itu terserah kalian.

Untuk yang diberi tanda berwarna kuning toc_1, merupakan nama ID dari heading tersebut yang tentunya mengikuti ID yang ada pada HTML Code di atas. selanjutnya jika kalian menambahkan heading, gunakan ID yang ke dua sesuai urutan TOC pada HTML Code di atas, contohnya toc1_1, dan seterusnya.

Untuk lebih jelasnya dapat kalian lihat melalui JSFiddle di bawah ini :

Akhir Kata

Table Of Content (TOC) atau yang di kenal dengan Daftar Isi di dalam blog memang sangat di perlukan ketika menulis artikel yang sangat panjang. Tujuannya untuk mempermudah pengunjung untuk menemukan penjelasan yang sedang dicari.

Dari penjelasan di atas sepertinya sudah sangat merinci, dan mudah di mengerti. Jika ada yang kurang di mengerti mengenai tulisan saya pada artikel ini, silahkan tinggalkan pertanyaan kalian pada komentar di bawah.

Artikel Terkait

Bagikan:

Tinggalkan komentar