Tes Posting Menampilkan File PDF dari Google Drive dan Disembunyikan di Blog

Nursahid

Minggu, 06 September 2020

Tes posting di sini.

Klik teks 'Show' untuk melihat full pdf

Cara Menempatkan File pdf di Postingan

Langkah 1 : upload file ke google docs.

Silahkan login ke https://drive.google.com/ dengan account gmail anda.
Klik tab BARU
Klik tombol UPLOAD
Masukan file yang ingin anda upload (word, excel, power point).
Klik tombol Upload File yang ada di sebelah bawahnya.
Tunggu beberapa saat sampai file anda terupload semuanya (tergantung dari besarnya file serta kecepatan koneksi anda).
Jika sudah terupload, anda bisa mengeditnya jika mau yaitu dengan mengeklik dokumen yang telah terupload.
Kemudian pilih bagikan
Maka muncul menu sharing settings.
Copy link to share ke notepad atau text editor lainnya.
Kemudian klik Selesai
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 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.

Silahkan login ke blogger dengan ID anda.
Klik Posting Baru.
Silahkan anda buat postingan yang anda inginkan.
Ketika anda mau menyisipkan kode yang dari google docs, klik terlebih dahulu tab Edit HTML ( jangan yang COMPOSE)
Paste kode google docs yang ada di notepad tadi pada tempat yang anda inginkan.
Klik Tombol MEMPUBLIKASIKAN POSTING.
Silahkan lihat hasilnya.
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="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: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="background: #FAFAF7; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Kemudian tambahkan script ini dibawah script pdfnya

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

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

Sumber:

http://orangsuren.blogspot.com/2017/11/cara-memasukan-file-word-excel-ppt-dan.html?m=1