Membuat Daftar Isi BLog Template Infinite AMP Ala Kompiajaib

Halo agan agan blogger.. Seperti Agan lihat, Blog ini menggunakan template Infinite AMP buatan Arlina (arlinadzgn.com). Infinite premium dong.. bukan gratisan hee :). Salah satu alasan kenapa memilih template infinite AMP ini adalah karena tampilannya clean and clear, simple dan good looking aja buat saya.

Tetapi terlepas dari itu semua tetap saja ada kesulitan saat menerapkan template blog Infinite AMP ini, diantaranya adalah saat membuat sitemaps atau daftar isi valid AMP dan cocok dengan tema blog infinite AMP ini.

Memang sih, pada dasarnya mayoritas blogger saat menggunakan template AMP mungkin awalnya akan merasa kesulitan untuk membuat template blog nya menjadi 100% valid AMP. Apalagi orang seperti saya yang benar-benar awam terhadap bahasa HTML apalagi AMP...

Tetapi untungnya ada Mas Adhy dari Kompiajaib (kompiajaib.com) yang murah hati selalu membagikan ilmunya untuk blogger laiinya, termasuk saya menggunakan kode dari kompiajaib.com untuk digunakan dalam membuat sitemaps atau daftar isi di blog ini. Kode yang saya maksud adalah kode seperti dibawah ini:

<amp-iframe title="Sitemap"
              src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemaps-amp.html?url=https://unbloging.blogspot.com/"
              height="750"
              layout="fixed-height"
              frameborder="0"
              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLBcjNMZ6PzxXRy3KROt98XIiYEQxb879d41ZRaUhPFc3yUipurbCOm47XglPYxtKnng9Ged0Y7zdM6b2sg86HB9IjdeHuxe8Wr2e3j3DnPN94Xc47V18B9VogXPoAaGZBqTv80FRh7OM/s1600/placeholder.png"
             layout="fixed-height"
             height="360"
             width="auto"
             placeholder>
    </amp-img>
  </amp-iframe>

Hasil jadi daftar isi-nya bisa dilihat disini:

• SITEMAPS

Secara umum (Bukan pengguna template infinite AMP) Cara membuat daftar isi untuk blog AMP dengan kode tersebut sangat mudah yaitu:

• Buatlah halaman baru dengan judul Sitemaps atau Daftar isi
• Copy kode diatas dan paste kedalam mode HTML halaman baru tersebut
• Ganti URL blog yg diberi tanda warna kuning dengan URL Blog Agan
• Save dan Selesai

Tetapi untuk pengguna template Infinite amp, sebelum melakukan langkah-langkah diatas, lakukan dulu langkah-langkah berikut ini supaya daftar isi-nya muncul sesuai harapan:

• Buka Tema >> Edit HTML
• Cari kode berikut ini : <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
• Nah tepat diatas kode tersebut ada kode tag conditional seperti ini: <b:if cond='data:blog.pageType == &quot;item&quot;'>




• Hapuslah tag conditional tersebut beserta dengan tag penutupnya yaitu </b:if>
• Kemudian Save Template

Sekarang coba lihat hasilnya, daftar isi untuk blog amp kita mirip dengan daftar isi kompiajaib.com. jika pendapatmu tidak mirip, yaah minimal kita sudah punya daftar isi / sitemaps valid AMP kan..