Jadi Berilmu Solusi Embed Preview Office Google Drive Tidak Muncul Di Blogger

Seperti biasa blog ini fokus seputar dunia pendidikan sehingga seringkali menampilkan contoh-contoh dokument yang berkaitan dengan pendidikan, tak lupa juga menampilkan preview dari dokument tersebut memakai embed office google drive ala kompiajaib.com menyerupai layaknya embed video youtube. Dengan begitu, pembaca dapat mengetahui secara eksklusif menyerupai apa dokument yang akan di download (tidak hanya berupa gambar).

Embed office google drive dengan javacsript yang diletakkan diatas </head> biasanya menyerupai ini:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type="text/javascript">
 //<![CDATA[
 function embedOffice(t) {
 document.write('<div style="text-align:center;margin:0 auto;width:100%;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;"><iframe style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" data-src="https://drive.google.com/file/d/');
 document.write(t);
 document.write('/preview" allowfullscreen></iframe></div></div>');
 }
 function init() {
 var vidDefer = document.getElementsByTagName('iframe');
 for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
 vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } }
 window.onload = init;
 //]]>
 </script>
 </b:if> 

Dan untuk menampilkan di postingan memakai isyarat dibawah ini:

 <script type="text/javascript">embedOffice("ID UNIK GOOGLE DRIVE");</script> 

Setelah beberapa bulan terakhir blog ini memakai embed office untuk menampilkan preview file di google drive, aku gres menyadari kalau ternyata embed tersebut sering tidak muncul di postingan.

Nah kalau anda mengalami hal yang sama menyerupai saya, silahkan hapus isyarat menyerupai dibawah ini yang disimpan di atas </head>

 function init() {
 var vidDefer = document.getElementsByTagName('iframe');
 for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
 vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } }
 window.onload = init; 

Kemudian ganti dengan menyimpan isyarat dibawah ini diatas </body>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type="text/javascript">
 //<![CDATA[
 var vidDefer = document.getElementsByTagName('iframe');
 for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
 vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } }
 //]]>
 </script>
 </b:if> 

Dengan cara ini, hasilnya preview embed office file google drive blog ini tampil dengan tepat tanpa ada gangguan apapun.
Selamat mencoba...

Jadi Bakir Cara Menampilkan Embed Preview Office Google Drive Untuk Blogger Amp Html

Jika sebelumnya saya pernah membahas ihwal Solusi embed office google drive for blogger, berbeda halnya untuk blog AMP yang dihentikan ada javascript selain js amp project, dan juga menjadi persoalan blog ini yang sudah nyata memakai template AMP sehingga berbagai 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 bila balasannya saya share juga kepada yang lain yang mungkin mempunyai persoalan yang sama.

Ya sudah tak perlu banyak celoteh gak penting, pribadi 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 semoga embednya dapat tampil di blog. Setelah anda mengklik tombol bagikan / share, klik lanjutan dipojok kiri bawah menyerupai pada gambar berikut:

Kemudian klik ubah / edit menyerupai gambar dibawah ini:

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

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

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

yang saya tandai ialah ID Google Drive.

langkah kedua

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

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

Silahkan copy arahan 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 menyerupai pada langkah pertama. Dan balasannya menyerupai ini


Bagaimana gampang bukan? Semoga bermanfaat dan selamat mencoba...

Update 22 Maret 2018:
Setelah uji coba, dengan arahan diatas kita juga dapat menampilkan dokumen format PDF (tidak hanya office).