Cara Upload PDF dan Menampilkannya di Postingan Blog (Responsive)
Untuk blog yang menyajikan tentang contoh dokumen atau tentang pendidikan biasanya sering berurusan dengan file pdf. Nah, alangkah baiknya jika kita bisa menampilkan juga file pdf tersebut secara langsung di blog. Tujuannya supaya pengunjung tahu secara garis besar isi dari pdf tersebut.
Pada artikel ini saya akan menjelaskan tentang bagaimana cara upload dokumen pdf ke blog dan bagaimana cara menampilkannya supaya bisa responsif. Caranya juga sangat mudah, kita menggunakan google doc untuk upload pdfnya. Kemudian setelah itu kita embed ke dalam postingan.
Bagi Anda yang bingung bagaimana cara uploadnya di google doc silahkan ikut langkah-langkahnya di bawah ini.
1. Silahkan buka halaman google doc.
2. Klik ikon open file picker seperti pada gambar berikut.
3. Klik pada bagian menu upload, kemudian silahkan cari dokumen yang ingin di upload.
4. Setelah terupload, klik 3 titik di samping photo profil dan pilih share.
5. Kemudian klik tulisan "Advanced" dan pada bagian who has acces ubah Private menjadi Public on the web. Jangan lupa klik Save setelahnya.
6. Kembali klik 3 titik seperti pada langkah 4, kemudian pilih "embed item". Silahkan copy url yang Anda peroleh.
Biasanya url embed dari google doc akan tampak seperti berikut:
Jika kita langsung memasang kode embed tersebut di postingan blog, maka tampilannya tidak responsif. Sehingga supaya responsif kita berikan css. Silahkan copy css berikut ke dalam kode blog Anda:
Kemudian untuk menampilkan dokumen pdfnya di postingan silahkan gunakan kode berikut. Cukup mengganti url file dokumennya saja.
Sehingga hasilnya nanti akan tampak seperti berikut:
Pada artikel ini saya akan menjelaskan tentang bagaimana cara upload dokumen pdf ke blog dan bagaimana cara menampilkannya supaya bisa responsif. Caranya juga sangat mudah, kita menggunakan google doc untuk upload pdfnya. Kemudian setelah itu kita embed ke dalam postingan.
Bagi Anda yang bingung bagaimana cara uploadnya di google doc silahkan ikut langkah-langkahnya di bawah ini.
1. Silahkan buka halaman google doc.
2. Klik ikon open file picker seperti pada gambar berikut.
3. Klik pada bagian menu upload, kemudian silahkan cari dokumen yang ingin di upload.
4. Setelah terupload, klik 3 titik di samping photo profil dan pilih share.
5. Kemudian klik tulisan "Advanced" dan pada bagian who has acces ubah Private menjadi Public on the web. Jangan lupa klik Save setelahnya.
6. Kembali klik 3 titik seperti pada langkah 4, kemudian pilih "embed item". Silahkan copy url yang Anda peroleh.
Biasanya url embed dari google doc akan tampak seperti berikut:
<iframe height="480" src="https://drive.google.com/file/d/1LONYT5ihZS5WmwqjlmBmG6NPk_HRe6xN/preview" width="640"></iframe>
Jika kita langsung memasang kode embed tersebut di postingan blog, maka tampilannya tidak responsif. Sehingga supaya responsif kita berikan css. Silahkan copy css berikut ke dalam kode blog Anda:
.Responsive embed{width:100%;height:300}
Kemudian untuk menampilkan dokumen pdfnya di postingan silahkan gunakan kode berikut. Cukup mengganti url file dokumennya saja.
<div class="Responsive">
<embed async='async' src="https://drive.google.com/file/d/1PyppxUo1OFJhGXi2lUbhtAGGFhmKGVZk/preview" style="display: block; height: 400px;"></embed> </div>
Sehingga hasilnya nanti akan tampak seperti berikut: