Cara Menampilkan File Preview Google Drive di Blog 100% Responsive

Cara menampilkan file google drive di blog (blogspot) sangat responsive di semua perangkat mobile dan desktop. Bagi kamu yang kepingin uploud file dari google drive ke blogger kamu bisa menggunakan cara embed dokumen langsung dari drive kamu.

Pada kesempatan kali ini saya akan membagikan pengalaman saya menampilkan gambar, file dan sebagainya yang mana bisa dimunculkan pada blogspot kalian.

Tutorial ini sangat singkat karena hanya saya kemas dalam langkah praktis, berikut tutorialnya.

Pertama, siapkan atau unggah file kamu ke dalam google drive masing - masing saya tidak akan mencontohkan semua nya secara detail karena saya anggap kalian sudah bisa uploud file.

Baca Juga : Cara Mudah Membuat Widget Recent Post, Langsung Tanpa Copy ke Template

Kedua, ambil link atau tautannya dengan cara klik kanan ppada file tersebut lalu klik bagikan -> salin tautan -> selesai.Jangan lupa untuk mengaktifkan publish ke publik ya agar semua orang dapat melihatnya.

Ketiga, masuk ke Blogspot -> Template -> Edit html -> CTRL + F cari tag </head> atau disearch head/, kemudian pastekan kode dibawah ini tepat diatas tag head.

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

Keempat, ganti copy ID tautan yang anda miliki biasanya seperti ini, yang saya tandai warna kuning itu ID nya.

https://drive.google.com/file/d/0Bz4YdwRI3rnCNEp2UTlQWXY0ekU/view?usp=sharing

Kelima, masukkan ID kamu ke kode dibawah ini.

<script type="text/javascript">embedOffice("ID KAMU DISINI");</script>

Keenam, enjoy! silakan save dan klik preview untuk melihat hasilnya.

Demikian ulasan singkat saya mengenai cara embed sebuah file yang sudah di uploud pada penyimpanan online google drive. Kamu akan mendapatkan fitur yang sangat bersahabat yaitu full responsive di mobile dan dekstop, semua akan menyesuaikan pada posisi lebar perangkat yang digunakan user.

Terima kasih telah membaca artikel cara menampilkan file google drive ke blog.

Berbagi :