Cara Menampilkan Embed Preview Office Google Drive Untuk Blogger AMP HTML

Cara Menampilkan Embed Preview Office Google Drive Untuk Blogger AMP HTML
Cara Menampilkan Embed Preview Office Google Drive Untuk Blogger AMP HTML

Jika sebelumnya saya pernah membahas tentang Solusi embed office google drive for blogger, berbeda halnya untuk blog AMP yang tidak boleh ada javascript selain js amp project, dan juga menjadi masalah blog ini yang sudah positif menggunakan template AMP sehingga banyak sekali error AMP untuk postingan yang menampilkan embed office dari google drive.

Akhirnya saya bertanya kepada mas +Adhy Suryadi selaku dokternya coding, dan tidak ada salahnya jika hasilnya saya share juga kepada yang lain yang mungkin memiliki masalah yang sama.

Ya sudah tak perlu banyak celoteh gak penting, langsung saja ikuti tour saya dalam menampilkan embed office dari google drive untuk blog valid AMP.

Langkah pertama

Langkah ini bagi yang masih pemula yang mungkin belum mengerti cara membagikan file dari google drive supaya embednya bisa tampil di blog. Setelah anda mengklik tombol bagikan / share, klik lanjutan dipojok kiri bawah seperti pada gambar berikut:

Cara Menampilkan Embed Preview Office Google Drive Untuk Blogger AMP HTML

Kemudian klik ubah / edit seperti gambar dibawah ini:

Cara Menampilkan Embed Preview Office Google Drive Untuk Blogger AMP HTML

Lalu akan muncul halaman pengaturan berbagi, klik / beri centang pada aktif - publik di web, lalu simpan.

Cara Menampilkan Embed Preview Office Google Drive Untuk Blogger AMP HTML

Setelah kita simpan akan muncul halaman untuk mengcopy link file tersebut biasanya seperti ini:

https://drive.google.com/file/d/0B2T-vvF42c1BOXZxcWNCazA5YXhsMGdxX2NmTVdmTTZQNFh3/view?usp=sharing

yang saya tandai adalah ID Google Drive.

langkah kedua

Silahkan Copy js amp iframe dibawah ini diatas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;, jika sudah ada lewati saja.

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Silahkan copy kode iframe dibawah ini di postingan pada mode HTML (bukan compose).

<amp-iframe
frameborder="0"
height="400"
layout="responsive"
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
src="https://drive.google.com/file/d/0B2T-vvF42c1BOXZxcWNCazA5YXhsMGdxX2NmTVdmTTZQNFh3/preview"
width="700">
</amp-iframe>

Kemudian ganti yang saya tandai dengan ID Google Drive seperti pada langkah pertama. Dan hasilnya seperti ini