Jika sobat Histutor ingin memasang sebuah iframe yang bisa diubah2 ukurannya maka sobat sudah mengunjungi halaman yang tepat, karena di bawah ini saya membagikan sebuah tutorial yang menjelaskan bagaimana cara membuat sebuah iframe resizeable, ok langsung saja ke tutornya.
 |
| Cara Membuat Iframe Resizeable |
1. Login ke akun blogger anda
2. Click On Template » Edit HTML
3. Gunakan Ctrl+F untuk menemukan kode
</head> 4. Setelah ketemu letakan kode
CSS script dibawah ini sebelum kode </head> <style>
.ui-resizable-helper { border: 1px dotted gray; }
.resizable{display:block; width:90%; height:400px; padding:30px; border:2px solid gray; overflow:hidden; position:relative;}
iframe{ width:100%; height:100%;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$( ".resizable" ).resizable({
animate: true, animateEasing: 'swing', animateDuration: 500
});
});
</script>5. Tambahkan
HTML/Javascript dibawah pada halaman postingan sobat untuk memanggilnya.<div class="resizable"> <iframe width="100%" height="400" src="https://www.youtube.com/watch?v=-Hux8dpk7ms" frameborder="0" allowfullscreen></iframe> </div>
6. Silahkan ganti url videonya menjadi url video milik sobat.
Selesai dan selamat mencoba.
HISTUTOR DEMO SAMPLE ×
Silahkan di geser untuk merubah ukuran layar video dibawah ini.
Silahkan tinggalkan komentar jika anda menemui kedala dalam pemasangan Iframe Resizeable ini, mari kita bahas bersama!
Demikian sedikit penjelasan tentang Cara Membuat Iframe Resizeable, jika ada kesalahan dalam penulisan saya mohon maaf dan semoga bermanfaat. Saya akan sangat senang dan berterimakasih jika sobat berkenan untuk berkomentar di blog ini.
0 Comments: