Cara membuat i frame untuk PDF Reader
Iframe adalah bingkai untuk menampilkan halaman website lain pada suatu halaman di web atau blog milik kita sendiri. Sebagai contoh Iframe yang banyak digunakan adalah Memasang / menggunakan file pdf, jpg, video dan lain sebagai nya dari file / folder di apps Google Drive
Kali ini kita membahas Bagaimana Cara membuat i frame untuk PDF Reader dari Google Drive dapat digunakan di Website atau Blog kita Sendiri.
Cara membuat i frame untuk PDF Reader dari Google Drive itu tidaklah sulit cukup mengedit beberapa code, silahkan ikuti langkah dibaha yang telah di buat oleh Jasaweb :
Langkah 1 - Copy Link di Google Drive dan salin
- klik kanan menu titik 3, posisinya tepat berada disudut kanan atas file yang ingin di embed atau ditampilkan pada website
- Arahkan cursor (mouse) ke menu “Bagikan“
- Klik submenu “Bagikan“
- lalu di Bar “Akses umum” pastikan anda memilih “Siapa saja yang memiliki link“
- Klik tombol “Salin” kemudian klik tombol “Selesai“.
Link dibawah merupakan hasil dari "Menyalin" file pdf dari google drive (seperti gambar terlampir diatas)
https://drive.google.com/file/d/1iYIUgAKayEpKkMRAZ-4y0cY4AnJ8m68R/view?usp=sharing
Langkah 2 - Ubah Format Tautan (Link) Google Drive
Format asli link PDF yang di "Salin" dari Google Drive adalah :
https://drive.google.com/file/d/1iYIUgAKayEpKkMRAZ-4y0cY4AnJ8m68R/view?usp=sharing
Sekarang kita perlu merubah link diatas agar dapat tampil di website kita dengan cara : Ganti bagian view?usp=sharing “akhir URL” menjadi preview
https://drive.google.com/file/d/1iYIUgAKayEpKkMRAZ-4y0cY4AnJ8m68R/preview
Langkah 3 - Buat atau sediakan Format i Frame, lalu sematkan Link Google Drive di i Frame
Berikut adalah contoh Format i Frame :
- Hapus “link-GoogleGrive” ganti dengan Link yang sudah di siapkan sebelumnya (seperti di Langkah 2)
- Link akan terlihat sebagai berikut :
<iframe src=”link-GoogleGrive/preview” width=”100%” height=”800px” style=”border:0;”></iframe> - width=”100% Menjelaskan Ukuran lebar dari PDF yang akan tampilkan
- height=”800px” Menjelaskan ukuran Tinggi dari PDF yang akan tampilkan
- Silahkan sesuaikan ukuran tinggi dari tampilan PDF anda dengan merubah code height=”800px” cMungkin anda bisa mencoba 900px, 1000px atau mungkin menjadi lebih kecil seperti 600px
- Jangan lupa untuk menyimpan dan Publish apa yang telah anda kerjakan
- Check hasil nya di Browser, Apakah semua sudah sesuai dengan apa yang Anda inginkan?
- Selamat Anda telah berhasil mengikuti tutorial diatas, jika anda memiliki pertanyaan silahkan kirimkan pesan anda ke Jasaweb.
Demo yang kami buat diatas berfungsi untuk Membuka File PDF Google Drive di website dengan HTML.
Jika Anda terbiasa menggunakan editor halaman seperti WordPress Block Editor, Elementor, Divi, WPBakery, dll Anda dapat mencoba menggunakan widget Classic Editor atau sejenisnya dengan metode yang sama .
Tampilan dari Demo Cara membuat i frame untuk PDF Reader di website dapat Anda lihat dibawah