Senin, 23 Mei 2016

Scroll iframe pada area tertentu


Judul yang sangat rumit, saya bingung mau buat judul bagaimana. Misal ada sebuah website yang anda tampilkan melalui iframe dan pada website tersebut ada sebuah konten yang ingin anda tampilkan, konten tersebut berada misalnya disidebar, nah disini kita akan menampilkan bagian tersebut.

1. Tampilan Asli Iframe


Frame Asli

Gambar diatas adalah hasil tampilan dari sebuah IFRAME secara Umum.

2. Modifikasi iframe


Frame Modifikasi

Hasil modifikasi menunjukan kita bisa menggeser konten lanagsung ke bagian artikel.

3. Kode modifikasi iframe


<style>
/*Kode #my-div adalah kerangka untuk memanipulasi iframe, pada kode ini disisipkan atribut position:relative sedangkan pada #my-iframe position:absolute ini berguna agar iframe dengan ID #my-iframe bisa digeser sesuka hati*/
#my-div {
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}
 
#my-iframe {
    position : absolute;
    top      : 0px; /*Atur nilainya menjadi minus atau plus biar posisinya pas (dari atas)*/
    left     : 0px; /*Ini juga sama tapi ini dari kiri*/
    width    : 1280px;
    height   : 1200px;
}
</style>

<div id="my-div">
<iframe src="https://zhinto.blogspot.co.id/" id="my-iframe" scrolling="no"></iframe>
</div>

Anda bisa menyimpan kode cssnya langsung ditemplate anda, atau bisa juga tetap seperti itu Jika ingin menggunakannya anda bisa menambahkan Gadget HTML/Javascript pada Tata Letak blog anda.

Referensi : Stoimen