Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menampilkan PDF di Blog Website dengan IFrame

Cara Embed PDF di Blogspot

Assalamu'alaikum Warahmatullah Wabarakatuh. 

Cara Memasukkan dan Menampilkan File PDF di Blogspot atau Blog Website Lain - Kali ini kita akan belajar bagaimana caranya menampilkan pdf di blog pada halaman atau postingan berupa blogspot, wordpress atau yang lainnya.

Sebagai contoh pdf blogspot, tampilannya adalah ada pada halaman paling bawah dari artikel ini.

 

Mengenal iframe HTML 

Sebuah website pada dasarnya adalah halaman HTML. Ketika kita ingin menampilkan suatu file pada html, maka kita harus mengenal perintah file tersebut. Perintah yang akan kita gunakan pada artikel ini adalah "iframe" dari HTML.

iframe adalah sebuah perintah yang digunakan untuk melampirkan dokumen didalam halaman html. Nah baris kode dasarnya adalah:
<iframe> .... </iframe>
 
Beberapa stribut dasar dalam penggunaan iframe ini adalah:
  • src (url)
    src adalah alamat dari file atau dokumen kita yang kita simpan disuatu penyimpanan online.
  • width (pixels)
    width adalah lebar dari frame dokumen yang ingin kita tampilkan. lebar ini dinyatakan dalam pixel.
  • height  (pixels)
    height adalah tinggi dari frame dokumen yang ingin kita tampilkan. tinggi ini dinyatakan dalam pixel.
Jadi, ketika kita menggunakan iframe, maka perintah dengan atribut dasar adalah:
 
<iframe src="www.AlamatPdf" width="640" height="480"></iframe>
 
Artinya, kita ingin menampilkan dokument dengan lebar 640 piksel dan tinggi 480 piksel. Mari kita praktekkan.
 
Untuk lebih lengkap tentang atribut dari iframe, anda dapat membaca disini.
 

Langkah dan Cara Memasukkan PDF di Website

Berikut ini saya akan memberikan contoh menggunakan Blogger atau Blogspot ya untuk memasukkan dan menampilkan pdf di blog, anda dapat menggunakan tutorial ini pada website lain seperti wordpress, joomla, dan website lainnya.

 

1. Pilih file PDF nya

Silahkan anda memilih pdf yang ingin digunakan. Terserah sumbernya ada dimana. Pada artilel ini saya mencoba sebuah file yang saya upload ke Google Drive
 
Sebagai contoh file pdf yang saya gunakan bernama electrical-instalation-guide.pdf, seperti pada gambar berikut:
 

2. Ambil Link

Sekarang saya demontrasikan cara mengambil alamat pdf dari google Drive berdasarkan dokumen yang saya upload tadi.

Anda harus ubah setelan berbagi file dengan cara klik tombol menu "Dapatkan link yang bisa di bagikan".

 
Klik tombol switch "Berbagi link aktif" (1), kemudian klik "Setelan berbagi" (2).
 
 
Kemudian klik "Lainnya".
 
 
 
Pilih radio button "Aktif - Publik di web", kemudian klik Simpan.
 
 
Klik tombol "Beres".
 
 
Klik 2x pada file pdf sehingga muncul seperti gambar berikut. Klik "Buka di jendela baru".
Setelah terbuka halaman baru seperti gambar berikut, klik menu "Sematkan Item" yang akan memberikan kode html agar pdf tersebut bisa tampil di halaman posting.
 
Copy seluruh kode html yang berada di dalam form tersebut.

3. Masukkan kode <iframe> ke halaman blog

Sekarang, jika anda menggunakan blogger maka buka halaman yang ingin disematkan dan menampilkan file pdf.
 
Lalu klik tombol menu "HTML" , kemudian pastekan kode html ke baris yang di inginkan, maka file pdf blogspot telah masuk ke hamanam postingan. 
 

 4. Cek File PDF

Sekarang kita cek, apakah website  yang telah kita sematkan tersebut telah berhasil diletakkan pada blog kita. Klik kembali tombol Compose untuk melihat perubahannya. Jika sukses menampilkan pdf di blog maka setelah itu anda dapat mempublikasikan postingan anda yang telah tersemat file pdf.
 
Jika anda merasa tampilan pdf diwebsite blogspot  ukurannya kurang sesuai, anda dapat mengaturnya pada kode html yang telah di pastekan ke lembaran Composite. 
 
Ubah nilai height="480" width="640" tersebut sesuai dengan keinginan.
 
 
 

Contoh PDF yang Ditampilkan.

Berikut ini adalah contoh pdf blogspot atau blogger yang saya tampilkan pada halaman artikel ini berdasarkan cara yang telah saya berikan diatas. Silahkan anda mencoba dengan file yang anda inginkan. 


 
Semoga artikel yang dapat menampilkan file pdf blogspot, blogger, wordpress, dan website lainnya ini bisa membantu anda. 
 
Jika anda merasa artikel Cara Memasukkan atau Menampilkan PDF di Blog Website ini bermanfaat, anda bisa membagikan artikel ini dengan teman-teman yang sedang membutuhkannya. Terima kasih.
 

Pencarian serupa:

 

Posting Komentar untuk "Cara Menampilkan PDF di Blog Website dengan IFrame"