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...