Responsive Code Warna, Video Dan Peta yaitu cara memasang Code Warna, Video Dan Peta pada postingan blog agar menjadi responsive tentunya juga valid.
Cara ini bukan hanya Cara memasang Code Warna, Video Dan Peta namun bisa digunakan untuk semua code yang berdasarkan :
iframe, object maupun embed.
Cara memasang Code Warna, Video Dan Peta ini saya bagi menjadi dua cara, yaitu:
A. Cara Sesekali, Cara memasang Code Warna, Video Dan Peta dengan Cara Sesekali, saya maksudkan disini bagi yang jarang memposting mengenai Code Warna, Video maupun Peta atau mempostingnya hanya sesekali saja.
B. Cara Berkali-kali, Cara memasang Code Warna, Video Dan Peta dengan Berkali-kali, cara ini saya maksudkan bagi yang sering memposting mengenai Code Warna, Video maupun Peta atau memposting berkali-kali.
- Untuk Demo hasil pemasangan
Peta silakan buka link berikut:
Maps Blog Rushdie
- Dan Demo untuk
Code warna lihat link berikut:
Kode Warna Blog
- Dan Demo untuk Hasil
Youtube, silakan lihat
video berikut dibawah:
1. Pertama, kita buka cara pertama atau Cara Sesekali:
Masukkan code berikut pada postingan entri baru anda kemudian publish,
<div>
<style scoped="scoped" type="text/css">
.ResponsiveDie{text-align:center;margin:2% auto;width:90%;}
.ResponsiveRus{position:relative;padding-bottom:100%;padding-top:25px;height:0; overflow:hidden;}
.ResponsiveRus iframe, video, object, embed{position:absolute;top:0;left:0; width:100%;height:100%;border:0;}
</style>
<div class="ResponsiveDie">
<div class="ResponsiveRus">
<object data="http://www.2createawebsite.com/build/col.swf"></object> </div>
</div>
</div>
Ganti Code berikut:
<object data="http://www.2createawebsite.com/build/col.swf"></object> </div>
Dengan Code Video, Code Warna maupun Code Maps yang ingin anda pasang, diatas merupakan contoh
code warna bisa anda pasang juga sekalian pada blog anda sendiri dan publish.
2. Kedua, cara kedua atau Cara Berkali-kali.
- Buka Edit template masukkan code css berikut diatas code
</style> :
.ResponsiveDie{text-align:center;margin:2% auto;width:90%;}
.ResponsiveRus{position:relative;padding-bottom:100%;padding-top:25px;height:0; overflow:hidden;}
.ResponsiveRus iframe, video, object, embed{position:absolute;top:0;left:0; width:100%;height:100%;border:0;}
Selanjutnya cara penggunaannya:
Pada entry baru pada postingan masukakan code berikut didalamnya kemudian publis.
<div class="ResponsiveRus">
<div class="ResponsiveDie">
<embed height="215" src="http://www.youtube.com/v/wItwkdP6FXQ" title="Responsive Code Warna, Video Dan Peta" width="360"/>
</div>
</div>
Ganti Code seperti dibawah berikut:
<embed height="215" src="http://www.youtube.com/v/wItwkdP6FXQ" title="Responsive Code Warna, Video Dan Peta" width="360"/>
Dengan Code Youtube, Maps maupun Code Warna yang anda ingin pasang.
Diatas merupakan salah satu contoh pesangan Code Youtube Valid Html 5,
Cara pemasangan Video atau Youtube agar valid HTML 5 sendiri juga terbagi dua cara :
1. Cara pertama pada code embed penutup belakang diganti :
"
</embed>" ganti hanya dengan "
/>" seperti contoh code diatas.
2. Cara kedua agar video valid html 5, Contoh:
<object width="500" height="281" data="//www.youtube.com/embed/wItwkdP6FXQ" title="Cara Memasang Video Responsive dan Valid"></object>
Ganti code
wItwkdP6FXQ dan
Cara Memasang Video Responsive dengan code youtube dan title youtube anda.
Fungsi penambahan Title text sendiri pada Url peta, gambar, video dan lain-lain tersebut bertujuan agar postingan menjadi seo frendly.