-->
Home » » Cara Membuat dan Memasukan File PowerPoint Responsive di Blog

Cara Membuat dan Memasukan File PowerPoint Responsive di Blog

Written By admin on Selasa, 02 Februari 2016 | Februari 02, 2016


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
 <div class="ppt">

<div class="ppt-responsive">

<div class="ppt-youtube loader">

Bla...bla...bla...
</div>

</div>

</div>
Bla...bla...bla...



4. Yang terkahir ganti kode bla - bla dengan kode iframe dari google slide tadi, sehingga kodenya berubah seperti ini



>


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.
SHARE THIS ARTICLE :

0 komentar:

Posting Komentar

Popular Posts

 
Support : Blogin Terpadu | Health Style ID | Nursing ID
Copyright © 2016. Nurse Cybers - All Rights Reserved
Responsive by Nurse Cyber Created by Website
Proudly powered by Nurse Cyber
-->