Skip to main content

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.
Google doc upload dokumen

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.
Share dokumen di google doc

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:
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar

Coba aplikasi TipsdanTrik.web.id

Tambahkan aplikasi TipsdanTrik di smartphone tanpa install, buka TipsdanTrik dengan browser Chrome di smartphone. Kemudian klik ikon 3 titikdi browser dan pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi TipsdanTrik dari layar utama smartphone Anda.