Membuat Dokumen PDF, Power Point, Word, Excel Responsive di Blogger

Posted on 12 views

Membuat dokumen responsive di blogger atau blogspot.com adalah cara yang dilakukan supaya file dokumen tersebut tampilannya menyesuaikan ukuran layar baik itu komputer maupun smartphone. Tanpa menggunakan dokumen responsive maka yang tampil di halaman blog akan terpotong sehingga sebagian poin penting yang terdapat pada file tersebut jadi hilang.

Berapapun lebar dokumen kalau itu responsive maka ukurannya menyesuaikan layar sehingga pembaca bakal nyaman dengan tampilan tersebut. Supaya bisa membuat dokumen responsive di blogger.com harus menambahkan kode CSS yang dipasang pada template blog dan kode HTML pada halaman posting.

Berbeda dengan WordPress yang cukup menggunakan plugin, di blogger.com sedikit menguras waktu tetapi itu menyenangkan karena Anda akan bermain script. Dokumen responsive ini sebagai penyeimbang tampilan mobile friendly yang diharapkan oleh Google demi kepuasan pengguna (user experience).

Blog yang memiliki template responsive maupun support AMP Google, belum tentu file dokumen yang ditambahkan ke postingan blog bisa responsive. Untuk itu Anda harus menyesuaikannya sendiri sesuai petunjuk yang diberikan TERAA.NET. Silahkan bandingkan tutorial ini dengan apa yang dibahas orang lain di blognya, pasti mudah ini karena implementasinya sangat gampang.

Ada 2 tahapan untuk mengimplementasikan tabel responsive pada blogger.com yaitu yang pertama upload file dokumen di Google Drive kemudian yang kedua menyematkan kode dokumen yang telah berhasil diupload tadi ke postingan blog. Supaya cepat paham langsung prakti saja sesuai tutorial berikut ini.

 

Upload File Dokumen ke Google Drive

1. Login ke akun Google Drive kemudian upload dokumen seperti biasa (bebas file PDF, Power Point, Word, dan Excel juga bisa)
2. Ubah pengaturan Berbagi Link dari nonaktif menjadi aktif supaya dokumen yang Anda tambahkan ke postingan blog bisa dilihat oleh semua orang

3. Ambil kode embed (Menyematkan Item), ambil kode yang diberi tanda warna biru saja untuk di implementasikan bersama kode HTML.

Menambahkan Kode CSS Responsive di Blogger.com

1. Login ke dashboard blogger.com kemudian masuk menu Tema
2. Desainer tema Blogger > pilih Lanjutan > tambahkan CSS. Berikut ini adalah kode CSS PDF responsive

.Responsive embed{width:100%;height:300}

3. Simpan dengan klik Terapkan ke Blog
4. Buat postingan baru > pilih mode HTML. Kemudian sisipkan kode berikut ini

<div class="Responsive">
<embed async="async" src="https://drive.google.com/file/d/xxx/preview" style="display: block; height: 400px;"></embed> </div>

5. Ganti embed kode file dokumen pada bagian xxx hingga menjadi seperti ini

<div class="Responsive">
<embed async="async" src="https://drive.google.com/file/d/1ZD4H91xRYZ8rmVow05zhAyt1_fCqaJwb/preview" style="display: block; height: 400px;"></embed> </div>

6. Simpan kemudian publish.

Demikianlah informasi cara membuat file PDF, PPT, Word, dan Excel responsive di postingan blogger. Setelah mengimplementasikan cara tersebut, pengunjung dijamin puas dengan dokumen yang Anda posting karena enak dibaca tanpa terpotong.

Baca: Cara Mengaktifkan PWA di WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.