Membuat Daftar Isi Blog Template Infinite Amp Ala Kompiajaib

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

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

Memang sih, intinya lebih banyak didominasi blogger ketika memakai template AMP mungkin awalnya akan merasa kesulitan untuk menciptakan template blog nya menjadi 100% valid AMP. Apalagi orang ibarat 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 memakai instruksi dari kompiajaib.com untuk dipakai dalam menciptakan sitemaps atau daftar isi di blog ini. Kode yang saya maksud yaitu instruksi ibarat dibawah ini:

 <amp-iframe title="Membuat Daftar Isi BLog Template Infinite AMP Ala Kompiajaib"               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/AVvXsEg4Y05ym31P7nZDjd7gabs6WDAIGMDj0mWsZTaCAJKgiaHAEwYNQr3GYkkHkRec-2qSdqSlHt4_WLMHlxokumkjqAbXjtyf58brDUFUMvEAWWaKD24x-SmJzbcjVB9g_x4I9s_XN9zohFQ/s1600/placeholder.png"              layout="fixed-height"              height="360"              width="auto"              placeholder>     </amp-img>   </amp-iframe> 

Hasil jadi daftar isi-nya sanggup dilihat disini:

• SITEMAPS

Secara umum (Bukan pengguna template infinite AMP) Cara menciptakan daftar isi untuk blog AMP dengan instruksi tersebut sangat gampang yaitu:

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

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

• Buka Tema >> Edit HTML
• Cari instruksi berikut ini : <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
• Nah sempurna diatas instruksi tersebut ada instruksi tag conditional ibarat 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 ibarat dengan daftar isi kompiajaib.com. kalau pendapatmu tidak mirip, yaah minimal kita sudah punya daftar isi / sitemaps valid AMP kan..