Cara Menampilkan File Preview Google Drive di Blog 100% Responsive

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.
cara menampilkan file atau uploud file dari google drive ke blog

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.
HTML Javascript Template

Dapatkan Tips Menarik Setiap Harinya!

  • Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
  • Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
  • Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel