Cara Membuat Daftar isi ( TOC ) Pada Blog AMP


Daftar isi atau biasa dikenal dengan Table Of Content ( TOC ) memang sangat penting dalam sebuah artikel yang memiliki banyak bahan atau materi yang terkandung di dalamnya

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

 Dengan kemajuan teknologi saat ini, msudah banyak orang - orang yang kini beralih, yang dulunya hanya menulis sebuah cerita atau naskah dalam sebuah kertas atau buku, kini menggunakan blog sebagai medianya yang langsung terhubung ke internet.

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.
Nah pada kesempatan kali ini warung tutorial akan membagikan tutorial cara memasang TOC pada blog amp.


Apa itu table of content



Table of conten adalah kotak yang berisi daftar isi dalam sebuah konten, biasanya di sebut TOC , biasanya terletak pada awal sebuah paragraf untuk memudahkan para pengunjung dalam membaca artikel

daftar isi tersebut juga biasanya di temukan pada blog blog yang memiliki konten yang banyak dan memiliki banyak tema bahasan dalam isi kontennya.

nah berikut warung tutorial akan memberikan kode HTML nya.

Cara membuat table of content

kalian tidak perlu paham tentak bahasa pemrograman, disini saya akan membagikan sebuag kode yang ringgal kalian copy saja, untuk caranya sebagai berikut.

  1. masuk ke dashbord blogger kalian.
  2. masukke tema.
  3. lalu masukke edit html.
  4. lalu cari code <style amp-custom>
  5. copy code di bawah ini lalu paste di bawahnya
/* 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;&lt;/code&gt;&lt;span style="background-color: yellow;"&gt;height:40px;margin-top:-40px;&lt;/span&gt;visibility:hidden}}

setelah itu jika kalian memiliki sticky top bar, kalian bisa mengganti code yang berwarna kuning dengan kode yang tingginya sesuai top bar kamu.

setelah kalian mengcopy code css tadi, langkah selanjutnya adalah saat kalian membuat artikel, kalian copy kode di bawah ini di tag html post kalian. ( sebelah tab compose )



<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>
nah baagaimana, mudah bukan membuat tabel of contennya, terlebih toc sangat bagus untuk seo dan memudahkan pengunjung dan semakin berah.

cukup sekian tutorial dari saya semoga bermanfaaat. terima kasih

Disqus Comments