Wednesday, April 6, 2016

Cara Menambahkan File PDF Ke Postingan Blog Responsive

Fasilitas Goole yang diberikan kepada blogger sangatlah power full. sekarang Anda bisa menambahkan file PPT (presentation file format) yang dibuat menggunakan Power Point ke dalam postingan blog. Anda tidak perlu lagi menggunakan aplikasi web pihak ketiga untuk upload file PPT. Menariknya lagi semua file Office seperti Word dan Excel juga bisa ditambahkan ke postingan blog.

Fasilitas Google yang digunakan untuk upload file PPT adalah Google Slide. Kalau dalam Microsoft Office Power Point versi online. Untuk menggunakan Google Slide harus login dengan akun Google (Google Mail), nantinya semua file yang diupload akan di simpan di ruang penyimpanan Google Drive.

Tips yang diberikan berikut ini juga menampilkan file PDF responsive. Artinya bisa dibuka disemua layar tanpa gambarnya kepotong. Istilahnya ukurannya menyesesuaikan ukuran layar komputer dan atau smartphone. Jadi pastingan dulu Anda telah menggunakan template blog responsive. Baiklah berikut ini cara menambahkan file PDF ke postingan blog responsive.

Cara Menambahkan File PDF Ke Postingan Blog Responsive:
1. Buka Google Slide https://www.google.co.id/intl/id/slides/about
2. Login menggunakan akun gmail Anda
3. Halaman Google Slide terbuka seperti gambar di bawah ini. Pilih File > Buka... (Ctrl+O)

4. Pilih Unggah/ Upload

5. Cari lokasi dimana Anda menyimpan file PDF yang dingin dimasukkan ke dalam postingan blog

6. Tunggu proses upload sampai selesai kemudian muncul halaman view file PDF yang diupload tadi
7. Klik tanda titik-titik (tiga tanda titif), kemudian Sematkan Item

8. Copy kode HTML, kemudian paste di halaman postingan blog pada HTML, bukan compose

9. Anda bisa menyesuaikan letak posisi file PDF baik rata kiri, tengan, dan kanan. Selain itu juga bisa menyesuaikan ukuran lebar dan tinggi dari file PDF tersebut. Contohnya adalah seperti ini ini
<center>
<iframe height="600" src="https://drive.google.com/file/d/0B8zzPYkMaxsPamJBT1RrMU1uaEk/preview" width="450"></iframe></center>
Kode warna merah untuk posisi file PDF
Kode biru untuk ukuran file PDF

Berikut ini adalah file PDF yang berhasil ditambahkan ke dalam postingan blog.
10. Tampilan file PDF tersebut belum responsive, Anda perlu menambahkan kode CSS di Edit HTML
/* CSS Only for PPT by Indoamaterasu.com */.post-body iframe{width:100%!important;}@media screen and (max-width:960px){.post-body iframe{max-height:90%}}@media screen and (max-width:768px){.post-body iframe{max-height:75%}}@media screen and (max-width:600px){.post-body iframe{max-height:60%}}@media screen and (max-width:480px){.post-body iframe{height:auto!important;max-height:auto!important}}
Letakkan kode CSS tersebut sebelum/ di atas kode
]]></b:skin>
Simpan template, dan lihat hasil file PDF yang dimasukkan ke dalam postingan blog dengan hape. Responsive bukan? semoga bermanfaat.


EmoticonEmoticon