Tes Posting Ver.2 Menampilkan File pdf dari Google Drive dan Disembunyikan di Blog

Menampilkan file pdf langsung di blog tentu tidak bisa, untuk mengatasinya ada cara tersendiri yang harus anda lakukan. Ikuti langkah-langkah di bawah ini agar file pdf, ms word maupun file-file dalam format lainnya bisa ditampilkan dan dibaca di blog. Tapi sebelumnya lihat dulu contohnya di bawah ini.

Klik teks 'Open Scroll' untuk melihat full pdf

 

Cara Menempatkan File pdf di Postingan

Langkah 1 : upload file ke google docs.

1. Silahkan login ke https://drive.google.com/ dengan account gmail anda.
2. Klik tab BARU
3. Klik tombol UPLOAD
4. Masukan file yang ingin anda upload (word, excel, power point).
5. Klik tombol Upload File yang ada di sebelah bawahnya.
6. Tunggu beberapa saat sampai file anda terupload semuanya (tergantung dari besarnya file serta kecepatan koneksi anda).
7. Jika sudah terupload, anda bisa mengeditnya jika mau  yaitu dengan mengeklik dokumen yang telah terupload.
8. Kemudian pilih bagikan
9. Maka muncul menu sharing settings.
10. Copy link to share ke notepad atau text editor lainnya.
11. Kemudian klik Selesai
12. Yang kita butuhkan bukanlah semua kode yang sudah kita copy sebelumnya (perhatikan kode yang berwarna merah-itu kode yang kita butuhkan)

https://drive.google.com/file/d/1SGF2TxCScijrbxKNvu46_Sl6CMbPAepg/view?usp=sharing

maka yang kita copy cukup kode 1SGF2TxCScijrbxKNvu46_Sl6CMbPAepg

Paste kode di bawah ini pada postingan blog
Ganti “(paste disini)” termasuk tanda kurung "( )" dengan kode tersebut di atas yang sudah kita dapat sebelumnya, (untuk ukuran width dan hight bisa diubah sesuai keinginan).

------------------------

<iframe src="https://docs.google.com/viewer?srcid=(paste disini)&pid=explorer&chrome=false&embedded=true" width="270" height="400"></iframe>

-----------------------

Selesai. 

Langkah 2 : posting kode google docs ke blogger.

1. Silahkan login ke blogger dengan ID anda.
2. Klik Posting Baru.
3. Silahkan anda buat postingan yang anda inginkan.
4. Ketika anda mau menyisipkan kode yang dari google docs, klik terlebih dahulu tab Edit HTML ( jangan yang COMPOSE)
5. Paste kode google docs yang ada di notepad tadi pada tempat yang anda inginkan.
6. Klik Tombol MEMPUBLIKASIKAN POSTING.
7. Silahkan lihat hasilnya.
8. Selesai.

Cara Menambahkan Scroll untuk Menyembunyikan dan Membukanya

• Pindah ke mode html, kemudian tempel script di bawah ini tepat sebelum script file pdf  tersebut. 
Hati-hati saat menempelkan scriptnya, sebaiknya pada saat di mode 'penulisan' tandai dulu batas penempatan scroll dengan teks, misalnya 'ini scrollnya', supaya gampang mencarinya di mode html.

Ini scriptnya:

<div style="margin: 5px;">
<div class="smallfont" style="background: rgb(0, 0, 0); margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 100px;" type="button" value="OPEN SCROLL" /></div>
<div class="alt2" style="background: rgb(250, 250, 247); border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

• INI LETAK FILE PDF (Kemudian tambahkan script dibawah ini)

</div>
</div>
</div>

• Kembali lagi ke mode penulisan biasa dan lihat apakah sudah sesuai penempatannya. Sebelum dipublish lihat pratinjau dulu.

00