Membuat Daftar Isi (Toc) Di Dalam Postingan Blog Valid Amp

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

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

Saat ini sudah banyak orang - orang yang sekarang beralih, yang dulunya hanya menulis sebuah dongeng atau naskah dalam sebuah kertas atau buku, sekarang memakai blog sebagai medianya.

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

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

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

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

DAFTAR ISI

• Mengenal Table Of Content Pada Blog
  • Apa itu Table Of Content ?
  • Kenapa Harus Menggunakan Table Of Content (TOC)
• Cara Membuat TOC Untuk Blog AMP
• Akhir Kata

Mengenal Table Of Content Pada Blog

Tak perlu jauh - jauh untuk melihat ibarat apa sih Daftar Isi di dalam postingan blog itu ?

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

Baik, kita mulai bahas satu per satu.

Back to Content ↑

Apa itu Table Of Content ?

Table Of Content atau lebih dikenal dengan nama Daftar Isi di dalam blog yaitu sebuah elemen yang sangat penting untuk membantu pembaca dalam memahami struktur penulisan artikel. Biasanya TOC ini hadir di dalam artikel yang mempunyai konten atau klarifikasi 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, alasannya adanya fitur jump to target yang berfungsi mengarahkan pengunjung secara eksklusif 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 melaksanakan scroll untuk mencari klarifikasi yang di butuhkan.

Back to Content ↑

Kenapa Harus Menggunakan Table Of Content (TOC)

Kalau di tanya kenapa.

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

Karena biasanya dalam penulisan artikel, penulis terlalu banyak menuliskan klarifikasi yang berdasarkan pembaca itu tidak terlalu penting. Kaprikornus cukup dengan melihat daftar isi, pembaca sanggup eksklusif menuju ke klarifikasi yang mereka butuhkan.

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

Back to Content ↑

Cara Membuat TOC Untuk Blog AMP

Oke, eksklusif ke intinya. Untuk menciptakan Table Of Content di dalam postingan yang valid AMP ikuti arahan 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 memakai Sticky Menu, silahkan ubah nilai pada CSS yang di beri tanda berwarna kuning height:40px;margin-top:-40px; sesuai tinggi dari Sticky Menu pada blog kalian. Jika tidak memakai 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 sesudah 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="Membuat Daftar Isi (TOC) Di Dalam Postingan Blog Valid AMP">Aliquam pulvinar bibendum mauris ut molestie</a>     
        <ul>       
           <li class="lvl2"><a href="#toc1_1" title="Membuat Daftar Isi (TOC) Di Dalam Postingan Blog Valid AMP">Aenean dapibus elit et quam vestibulum</a></li>         
          <li class="lvl2"><a href="#toc1_2" title="Membuat Daftar Isi (TOC) Di Dalam Postingan Blog Valid AMP">Donec cursus lacus diam</a></li>        
          <li class="lvl2"><a href="#toc1_3" title="Membuat Daftar Isi (TOC) Di Dalam Postingan Blog Valid AMP">Donec id dolor quis ipsum hendrerit</a></li>        
        </ul> 
   </li>   
   <li class="lvl1"><a href="#toc_2" title="Membuat Daftar Isi (TOC) Di Dalam Postingan Blog Valid AMP">Mauris dapibus blandit ipsum a aliquet</a></li>   
   <li class="lvl1"><a href="#toc_3" title="Membuat Daftar Isi (TOC) Di Dalam Postingan Blog Valid AMP">Praesent dignissim purus a purus accumsan facilisis</a></li>   
   <li class="lvl1"><a href="#toc_4" title="Membuat Daftar Isi (TOC) Di Dalam Postingan Blog Valid AMP">Integer at pellentesque tortor</a></li>   
 </ul> 
 </div> 
 </div>  

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

Selanjutnya buatlah header di bab paragraf dari setiap klarifikasi kalian. Misalnya saja aku beri referensi ibarat ini. <h4 id="toc_1">Aliquam pulvinar bibendum mauris ut molestie</h4> Contoh di atas, aku memakai tag <h4> sebagai header di setiap klarifikasi saya. Kalian juga sanggup memakai 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 bila kalian menambahkan heading, gunakan ID yang ke dua sesuai urutan TOC pada HTML Code di atas, misalnya toc1_1, dan seterusnya.

Untuk lebih jelasnya sanggup 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 saat menulis artikel yang sangat panjang. Tujuannya untuk mempermudah pengunjung untuk menemukan klarifikasi yang sedang dicari.

Dari klarifikasi di atas tampaknya sudah sangat merinci, dan gampang di mengerti. Jika ada yang kurang di mengerti mengenai goresan pena aku pada artikel ini, silahkan tinggalkan pertanyaan kalian pada komentar di bawah.

Back to Content ↑

Sumber https://www.idnxmus.com/

Bagikan Artikel ini