Cara Embed File PDF Ke Halaman Postingan Blogger

Pernahkah Anda bertanya-tanya tentang menyematkan file PDF di dalam posting blog Anda? Nah, kita akan belajar bagaimana siapa pun dapat menyematkan file PDF mereka di dalam posting blog blogger itu sendiri sehingga pembaca Anda tidak perlu meninggalkan blog Anda untuk melihat file PDF. Fitur ini mungkin bermanfaat bagi banyak orang yang berbagi file PDF di blog mereka. Kita dapat menyelesaikan tugas ini menggunakan Google Drive.

Google Drive adalah layanan hosting file gratis oleh Google dengan penyimpanan 15GB yang memungkinkan anda menghosting file ke Blogger secara gratis. Bahkan Anda juga dapat meng-host situs web di dalamnya. Ini adalah sedikit pengantar tentang Google drive dan tanpa menghabiskan banyak waktu berharga Anda.

Menyematkan atau mengembed konten media seperti gambar, audio dan video adalah proses yang sangat sederhana di Blogger. Bekerja dengan file PDF, bagaimanapun, membuat Anda berusaha lebih keras untuk menyematkan dan menampilkannya dengan benar di halaman postingan Blogger.

PDF adalah salah satu format file paling populer. Ukuran dan fleksibilitasnya membuatnya nyaman untuk dibagikan secara online. Meskipun PDF sama mudahnya untuk sematkan ke situs Blogger seperti file lainnya, menyematkan atau menampilkannya di situs Blogger sangatlah mudah.

A. Kode Menyematkan File PDF

Setiap hari rentang perhatian pembaca online sangat berkurang. Jadi penting untuk membuat mereka semua merasa diterima saat mengunjungi situs web Blogger anda. Jika Anda memiliki dokumen yang sangat penting dan panjang yang ingin Anda bagikan dengan semua pengunjung situs web Anda, maka cara termudah untuk melakukannya adalah dengan menyematkan dokumen Google atau file PDF Anda di halaman postingan blogger.

Menyematkan file PDF di situs web Blogger memungkinkan anda untuk menampilkan dokumen PDF di halaman Blogger tanpa harus mengunduh atau membukanya di aplikasi terpisah. Ada beberapa cara untuk menyematkan file PDF di situs web. Mari kita lihat beberapa di antaranya.

1. Menggunakan embed element

Elemen embed adalah tag HTML yang memungkinkan Anda menyematkan berbagai jenis konten media di halaman web, termasuk file PDF. Untuk melakukan ini, tentukan atribut src dengan tautan ke file PDF dan jenis atribut dengan nilai "application/pdf". Misalnya.

<object data="/pdf/example.pdf" type="application/pdf" width="600" height="800"></object>

Kode ini akan membuat elemen objek dengan lebar 600 piksel dan tinggi 800 piksel, yang akan menampilkan isi contoh file PDF. Pdf. Anda juga dapat menggunakan atribut lain, seperti gaya, kelas, id, dan sebagainya, untuk menyesuaikan tampilan dan perilaku elemen objek.

Salah satu keunggulan elemen objek dibandingkan elemen embed adalah memungkinkan Anda untuk menentukan konten alternatif untuk kasus ketika browser tidak dapat menampilkan file PDF atau pengguna telah menonaktifkan plugin. Untuk melakukan ini, tempatkan konten alternatif di antara tag objek pembuka dan penutup. Misalnya.

<object data="/pdf/example.pdf" type="application/pdf" width="600" height="800">
<p>Browser Anda tidak mendukung tampilan file PDF <a href="example.pdf">???????</a> ???? ??? ?????????? <a href="https://get.adobe.com/reader/">Adobe Reader</a>.</p>
</object>

Kode ini akan membuat elemen objek dengan lebar 600 piksel dan tinggi 800 piksel, yang akan mencoba menampilkan isi contoh file PDF. Pdf. Jika ini gagal, pengguna akan melihat pesan dengan tautan untuk mengunduh file atau menginstal Adobe Reader.

2. Menggunakan tag iframe

Tag iFrame sangat disarankan oleh Google Blogger. Hampir semua file yang ada di Google Dirve hanya dapat disematkan dengan tag IFrame. Kalau boleh dikatakan tag iFrame sebagai tag default yang menghubungkan semua platform Google (doc, sheet, drive). Dengan tag iFrame semua proses embed suatu file menjadi sangat mudah.

Tag iframe adalah tag HTML yang memungkinkan Anda menyisipkan halaman web lain sebagai bingkai pada halaman web. Ini dapat berguna untuk menyematkan file PDF jika dihosting di situs atau layanan lain. Untuk melakukan ini, tentukan atribut src dengan tautan ke file PDF dan atribut lebar dan tinggi untuk mengatur ukuran bingkai.

Menyisipkan iframe di halaman web Anda memerlukan tag awal dan akhir yaitu <iframe> .... serta </iframe> sumber target yang Anda tempatkan di iframe. Untuk melakukannya, Anda harus menggunakan atribut src= mirip dengan menyisipkan gambar atau pdf di halaman web Anda. 

Anda juga dapat mengatur tinggi dan lebar tertentu ke iframe Anda dengan menggunakan atribut height= dan width= di tag awal, nilai-nilai ini ditentukan dalam persentase atau sebagai piksel jendela browser.

Start Tag	<iframe>
End Tag	</iframe>
Attributes	height=	Menentukan tinggi iframe Anda
		dalam persentase atau piksel
	width=	Menentukan lebar iframe Anda
		dalam persentase atau piksel
	src=
Contoh	<iframe src="https://www.google.com" width="300" height="100%"> </iframe>
Hasilnya	Menampilkan halaman web dalam iframe
	dengan lebar 300 piksel dan selebar jendela browser

Namun, menggunakan tag iframe memiliki beberapa kekurangan. Pertama, itu tergantung pada apakah situs atau layanan yang menghosting file PDF memungkinkannya untuk disematkan di situs lain. Jika tidak, pengguna akan melihat kesalahan atau bingkai kosong. Kedua, ini dapat memperlambat pemuatan halaman web, karena browser perlu membuat permintaan tambahan ke situs atau layanan lain. Ketiga, dapat menimbulkan masalah dengan keamanan dan kerahasiaan data, karena bingkai mungkin berisi kode yang tidak diinginkan atau berbahaya atau melacak tindakan pengguna.

Di bawah ini adalah contoh script lengkap penggunaan tag iFrame.

<iframe src="https://drive.google.com/file/d/10-5OgSLYuDNcaCKTZK0RwAoknsqaOBCH/preview" width="600" height="800" style="border: none;"></iframe>

A. Menyematkan File PDF ke Postingan Blogger

Untuk dapat memasukkan dokumen PDF ke dalam konten Blogger Anda, Anda memerlukan platform online lain untuk menghosting file Anda terlebih dahulu. Untuk contoh ini, kami akan menggunakan Google Drive untuk mengunggah file secara online. Berikut panduan langkah demi langkah tentang cara menyematkan file dari Google Drive ke Blogger:

1. Upload file PDF ke Google Drive

Karena kita akan menyematkan/embed file PDF ke blogger, maka pekerjaan pertama yang harus anda kerjakan adalah anda telah memiliki file pdf yang akan disematkan. Pada artikel ini kami anggap anda telah memiliki file pdf dan telah di upload atau telah disimpan di Google drive.

2. Dapatkan Link Sharing (link embed)

Setelah anda mengupload file pdf ke Google drive, double klik file pdf tersebut, sehingga muncul halaman baru. Pada halaamn baru tersebut klik "Open in new window".

Ketika anda mengklick menu tersebut akan mucnul lagi halaamn baru, kemudian anda klick menu "Embed item", seperti gambar berikut.

Hasilnya akan tampil script embed dari file PDF tersebut. Script embed yang akan kita gunakan untuk menyematkan file PDF di blogger.

3. Cara meletakkan Script Embed di postingan Blogger

setelah anda mendapatkan script embed untuk file pdf, segera letakkan script tersebut ke dalam script html halaman blogger anda. Caranya klick tanda pensil di bagian kiri atas pada menud editor postingan, sehingga muncul script html dari halaman blogger anda, seperti gambar berikut.

Anda dapat meletakkan script embed tersebut dimana saja, sesuai isi artikel yang sedang anda tulis. Gabmar di atas hanya contoh. Sekarang kita lihat hasil dari penempatan script embed dari gambar di atas.

Untuk ukuran height dan width dapat anda sesuaikan, tergantung selera anda. Buat tampilan PDF di halaman blogger biar nyaman dilihat, sedap dipandang dan enak di buka.

Menyematkan file pdf di situs web adalah cara yang nyaman untuk menyajikan informasi tentang format yang mudah dibaca dan dicetak. Dengan melakukan embed PDF akan membuka kemungkinan baru untuk kolaborasi, keterlibatan pengguna, dan berbagi dokumen tanpa hambatan. Dengan mengikuti langkah-langkah sederhana yang diuraikan dalam panduan ini, Anda dapat dengan mudah menyematkan file PDF dan memberikan pengalaman yang lebih baik bagi pengunjung situs web Anda. Ingatlah untuk menyesuaikan tampilan, memastikan aksesibilitas, dan perhatikan pengaturan keamanan.