Cara Memasang Iframe di Blog Template AMP Platform Blogger

Kalian merasa bingung memasang iframe ke template platform blogger agar valid AMP? Jika iya, dalam postingan ini saya akan beri tahu caranya dengan langkah-langkahnya.

Namun sebelumnya, cek dahulu apakah iframenya menggunakan HTTPS atau hanya HTTP? Karena ketika iframe-HTTP untuk blog yang SSL/HTTPS (contoh blog ini), sudah saya terapkan dan tidak muncul. Namun ketika di blog non HTTPS, bisa. Jadi, dicek dahulu!

Sepertinya tak perlu basa-basa lagi ya? Haha. Langsung saja yuk!

Karena judulnya juga sangat jelas, ikuti step by stepnya:

1. Copy paste tag meta amp iframe ke bagian <head> ... </head> pada fitur edit HTML template:
<script async="async" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Namun jika sudah ada, langsung ke langkah berikutnya.

2. Lalu, copy paste kode berikut ke bagian yang ingin kalian tampilkan:
<amp-iframe width="388"
  title="Kota Yogyakarta"
  height="280"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  frameborder="0"
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63245.97077191126!2d110.33982534474266!3d-7.803249010409012!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a5787bd5b6bc5%3A0x21723fd4d3684f71!2sYogyakarta%2C+Yogyakarta+City%2C+Special+Region+of+Yogyakarta!5e0!3m2!1sen!2sid!4v1513044846140" title="Google map pin on Googleplex, Mountain View CA">
</amp-iframe>

Note! Ganti kode yang saya bold dengan kode iframe kalian. Untuk ukuran width dan height dirubah sesuai dengan lebar template. Title juga diganti dengan identitas iframe kalian.

3. Jika sudah, Simpan dan lihat hasilnya.

Bagaimana, mudah sekali bukan? Ya iyalah, lha sudah saya kasih tahu.

Berikut contohnya yang saya buat dengan mengambil iframe kode peta Yogyakarta pada google maps:



Diingat kembali bahwa iframe HTTPS atau HTTP, ini sangat berpengaruh untuk muncul dalam template valid AMP!

Untuk embed video youtube bisa menggunakan cara ini atau cara yang khusus, jika mau yang khusus kalian baca artikelnya di sini.

Baca juga:

Jangan lupa, bagikan postingan ini ke teman kalian yang juga membutuhkan dan baca juga artikel menarik lainnya dalam blog ini :)

Semoga bermanfaat, Amin!

Open Comments Close
*via mobile, like dahulu untuk melihat komentar

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Learn more