Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Iframe Responsive di Blogger

Cara Membuat Iframe Responsive di Blog

Karena sudah terbiasa dengan menggunakan amp-iframe, jujur saya agak sedikit lupa bagaimana cara membuat iFrame responsive. Maka ini sebagai catatan pribadi dan sedikit berbagi.

Bagi sobat yang ingin membuat iframe responsive, silahkan ikuti langkah-langkahnya

Tambahkan CSS

Silahkan tambahkan CSS ini di blog sobat

.ifr-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

Cara Penulisan

Untuk menulis di Blog, contoh HTMLnya seperti ini

<div class="ifr-container">
	<iframe
		allowfullscreen=""
		frameborder="0"
		height="170"
		width="750"
		class="responsife-iframe"
		src="https://tutorial.kang-ismet.com/visitor-counter-ifr.html">
	</iframe>
</div>
Sesuaikan tinggi dan lebar iframe. Kemudian harus ada class="responsife-iframe"

Semoga Bermanfaat

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

6 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Ganti tema lagi kang
    1. mengatasi kebosanan aja mas :)
    2. Mas minta script konvert komentar
    3. yang mana mas?
    4. Yang itu mas, kayaitu di komentar
    5. Kodenya lumayan panjang mas, ga tau sharenya di mana ya.. hehe
      terus kalau blognya jarang share tutorial, kayaknya ga perlu pake script gitu kayaknya
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.