Kalau biasanya kita
memasukan dan memasang file DOC,EXCEL,POWERPOINT maupun PDF ke dalam artikel blog dengan slidshare namun pada kesempatan kali ini, saya akan memberikan tutorial yang berbeda dengan yang lainya, yaitu cara memasang File Power Point dan PDF ke Postingan Blog menggunkan google drive dengan fasilitas google slide. Karena menurut saya mengupload file ke ppt ke google drive lebih enak dari pada di slide share , entah apa alasanya saya gak tau , mungkin karen udah sering menggunakan layanan dan fasilitas google , jadi suka yang ala google deh wkwkwk ( wiwiting tresno jalaran songko kulino )
Tidak hanya cara memasang file ppt atau pdf dan sejenisnya ke dalam postingan blog, melainkan kita akan memodifikasi file tersebut agar responsive, karena ini zamanya web responsive gaes ( mobile friendly ) sehingga ketika kita pasang ke dalam blog, filenya secara otomatis ukuranya dapat menyesuaikan ( tinggi lebarnya ) dengan perangkat yang digunkan alias tidak terpotong.
Cara Memasang file Power Point di Blog Dengan Google Slide
Sebelum kita memasukan file ppt ke dalam postingan blog, tentunya kita harus menyiapkan file ppt yang akan ki pasang di blog terlebih dahulu, kemudian kita upload ke google drive dan ambil kode iframeya. Untuk lebih jelasnya ikuti tutorial berikut ini :
1. Yang pertama pastikan sobat sudah masuk ke akun gmail sobat, jika belom silahkan masuk dulu
2. Setelah login ke akun gmail, langkah selanjutnya yaitu kita masuk ke google drive yang beralamatkan
https://www.google.com/drive/ , kemudian klik tombol " Kunjungi Google Drive "
3. Selanjutnya kita upload file powerpoint tadi ke googledrive, caranya klik tulisan "
BARU " yang bewarna merah dan kemudian klik
unggah file
4. Pilih file ppt ( powerpoint ) yang akan di unggah , contohnya disini saya akan mengupload file ppt tugas drama sekolah.
5. Tunggu Sampai uploadnya selesai 100% ( dapat dilihat di pojok kanan bawah )
6. Setelah proses menggungah sudah selesai, kemudian kita
klik link bagikan
7. Nanti akan ada jendela pop up yang mucul untuk pengturan Acces, kita disuruh untuk setting siapa saja yang dapat mengakses file ppt tersebut, kita setting untuk
Public on the web ( umum ) aja.
8. Klik kanan file PowerPoint tadi kemudian buka dengan google silde
9. Pada menu File klik sub menu publikasikan di web
10. Setelah itu kita ambil kode iframenya pada menu sematkan ( hampir mirip ketika mengambil script iframe youtube dan memasukanya ke blog ). silahkan tonton gambar berikut supaya lebih jelas.
10. Langkah yang terkahir kita salin dan pastekan kode iframe tadi pada kolom
html
bukan
Compose
Sebagai contoh dari tutorial ini adalah file powerpoint berikut
Sampai disini cara memasang file power point ke postingan blog sudah selesai, namun syangnya tidak responsive, jika sobat menginkan responsive bisa lanjut mengikuti tutorial dibawah ini
Cara Membuat dan Memasukan File PowerPoint Responsive di Blog
Sayangnya kode embed default dari google slide tidak responsive, nah supaya powerpoint responsive dan bisa menyesuaikan device layar, maka kita perlu menambah kode css dan html absolut responsive caranya :
1. Pertama sobat masuk ke
Menu template => Edit HTML , kemudian pasang css ini diatas kode
</style>
.ppt{text-align:center;background:linear-gradient(to bottom,#fefefe 0%,#d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:20px auto;width:80%;box-shadow:1px 30px 30px -26px #818181}
.ppt-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px}
.ppt-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
2. Simpan template dan sekarang kita masuk ke bagian postingan blog
3. Masukan kode dibawah ini pada kolom html bukan compose ( seperti tutorial nomer 10 diatas )
<div class="ppt">
<div class="ppt-responsive">
<div class="ppt-youtube loader">
Bla...bla...bla...
</div>
</div>
</div>
4. Yang terkahir ganti kode bla - bla dengan kode iframe dari google slide tadi, sehingga kodenya berubah seperti ini
<div class="ppt">
<div class="ppt-responsive">
<div class="ppt-youtube loader">
<iframe src="https://docs.google.com/presentation/d/1DLyQwy3v48lqCacqR-B6r9ZVC9Wf8UJMY4wnrW14h84/embed?start=true&loop=true&delayms=3000" frameborder="0" width="480" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</div>
Karena ini sudah responsive maka kode
width="480" height="389"
di hapus saja.
Dan hasilnya nanti akan tampak seperti ini, silahkan sobat buka di hp android anda , maka anda akan melihat perbedaan ppt diatas dengan yang dibawah ini yang responsive
Itulah cara membuat dan memasang file powepoint ke dalam artikel blog dengan mudah, untuk yang file pdf, excel dan lain -lainya hampir sama dengan cara yang diatas , perbedaanya hanya file yang kita upload, jika menginginkan file pdf maka kita harus upload file pdf dan mengambil script iframe embednya dan memasukannya kedalam html postingan blog.
25 Komen Cara Memasang / Memasukan File PowerPoint dan PDF ke Postingan Blog
sangat lengkap dan sangat bermanfaat sekali mas yadi
hahah, iya mas makasih :)
Sangat membantu, terkhusus bagi blog-blog yang banyak berisi file berekstensi .pdf dan .ppt
Trimakasih untuk ilmunya :)
Makasaih gan baru tahu ane caranya ...
Artikel sangat membantu mas. Mudah2an nanti saya bisa mraktekkin hehe
Sangat jelas sekali dan tutornya bertahap semakin enak diikuti.
Sangat bermanfaat mas, saya simpan ya?
Makasih
Tukar link yok gan??ntar link agan aku tempel di blog ku, begitupun juga kebalikannya
Bookmark dulu mas sangat bermanfaat.
makasih mas, share informasinya...
keren..thanks ya sudah kami terapkan dan berhasil
edit html nya gak ketemu kode < / style > nya :(
ini gimana ya
apa beda nya responsive atau engga? soalnya gk kebuka file di atas :D
pas edit html gak ketemu kode < / style > :(
jd ini gimana ya
btw emang apa beda nya kalo responsive dan engga?, soalnya file nya gak kebuka disaya
mantep, paham bgt+berhasil
terimakasih
Mas saya mau tanya, untuk CSS itu kan contohnya powerpoint, kalo file yang mau kita pasang adalah file PDF, kode CSS-nya sama ga ya?
Terimakasih
oke mas
terimakasih ilmunya membantu :)
mas.. terimakasih ilmunya.
tolong di ulas juga untuk menampilkan tutorial yang bisa jalan sendiri d blog gtu gimana..
mantap makasih banyak infonya
terimakasih.... sangat membantu
makasih mas, sudah saya praktekkan dan ok.
mas bisa minta tolong? bagaimana caranya membuat blog berisi materi ppt yg langsung d doenload...misalmnya dlm sbuah blog ada materi
{Kimia dasar}nah ktka d kli Kimia dasar langung mendownload ppt nya ma. Terimakasih
mkasihhh, sangatt membantuu :)
min pas edit html kok gk nemu kode < / style > nya
mohon bantauannya min terima kasih
artikelnya sangat membantu sekali gan, trims..
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish