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 menggunakan embed office google drive ala kompiajaib.com seperti layaknya embed video youtube. Dengan begitu, pembaca bisa mengetahui secara langsung seperti apa dokument yang akan di download (tidak hanya berupa gambar).

Embed office google drive dengan javacsript yang diletakkan diatas </head> biasanya seperti 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 menggunakan kode dibawah ini:

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

Setelah beberapa bulan terakhir blog ini menggunakan embed office untuk menampilkan preview file di google drive, saya baru menyadari jika ternyata embed tersebut sering tidak muncul di postingan.

Nah jika anda mengalami hal yang sama seperti saya, silahkan hapus kode seperti 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 kode 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, akhirnya preview embed office file google drive blog ini tampil dengan sempurna tanpa ada gangguan apapun.
Selamat mencoba...

Artikel Terkait