Mengenal dan Membuat Iframe

2.28.2009
Saya ingin sedikit mengulas tentang salah satu fungsi kode HTML yakni perintah <iframe>.Sebenarnya tutorial ini dari Kang Rohman untuk lebih menjelaskannya maka tutorialnya saya buat juga.
Kembali ke iframe,dengan perintah iframe kita dapat menampilkan isi dari situs ataupun blog milik orang lain pada blog milik kita, namun walaupun demikian kita tidak boleh sembarangan tentunya harus mendapatkan izin terlebih dahulu dari pemilik blog yang ingin di tampilkan. Perintah dasar dari iframe adalah sebagai berikut :

<iframe> .... isi dari iframe .... </iframe>



Beberapa atribut yang sering di pasang dalam iframe adalah :
  • ALIGN="left/right" --> Untuk mengatur posisi iframe
  • WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen
  • HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen
  • FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas
  • SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada iframe
  • SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada iframe
Agar lebih mudah untuk di fahami, maka saya akan memberikan dua contoh dari fungsi perintah iframe. Misalkan alamat sumber yang ingin saya tampilkan adalah isi dari blog saya yang lain yang beralamat di http://google.co.id/, lebar yang ingin saya gunakan adalah sebesar 700 pixel, dan tinggi sebesar 300 pixel.

IFRAME yang tidak mempunyai garis pembatas dan tidak mempunyai fasilitas scrolling
Contoh kode yang di pasang seperti ini :

<iframe align="left" frameborder="0" src="http://google.co.id/" width="550" height="300" scrolling="no"> </iframe>



Hasilnya seperti ini :

begitulah hasilnya.

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling
contoh kode yang di pasang seperti ini :

<iframe align="left" frameborder="10" src="http://google.co.id" width="550" height="300" scrolling="auto"> </iframe>



Hasilnya seperti ini :

begitulah hasilnya.

Dengan Iframe kita bisa mengintip isi blog orang lain pada blog kita.Terlebih dahulu sobat izin sama yang punya blog yasengihnampakgigi.
Selamat bereksperimen.

20 komentar:

  • Cebong Ipiet

    wew...kalo pas buka halaman login gmn?duuuuuh

  • bunda

    lho mas kalo pas lagi login spt yg dibilang mbak cebong ipiet..... apa ga bikin sebel ...hati2 lho bisa diomelin tuh ...sori ya x(

  • Tips Kecantikan

    wah another ilmu lagi tuh....mas tuh mbikin 'blogger beken' bisa discrolling gmn caranya yah?

  • aprie

    weh sip infonya...
    thanks..

  • david

    Wah Keren Ne Rid.........

  • IFOEL

    mantap juga nih.... thx sharingnya

  • Ocim

    tips lagi nich, aku mohon bimbingannya yak mas ...

  • sandy

    mantab nui mas,sip saya lagi butuh pelajaran iframe nui cz lagi mau utek" template..

    hehe..

  • TUKANG ARSIP

    @ cebong ipiet dan bunda : login ajah den mdh kok :D
    @ Tips Kecantikan : ok mbak ntar saya tampung requestnya:f
    @ aprie,david,IFOEL : oke deh mas sama2
    @ ocim : kan akang udh master tuh :$
    @ sandy : ok deh mas...

  • infini3

    Mantap !!!
    Ini dia yang saya cari2 dari dulu. Saya sering liat ada blog yg seperti ini, ternyata begini ya caranya.
    Makasih banyak ya caranya... :)

  • Erik

    Naruhnya di mana? sbg widget (html/javascript) atau melalui edit html?

  • ANDIE

    wah mantep infonya...kerennnn
    Aq punya trik cepet ngumpulin traffic di blog kamu!!!!

    <---------------------Copy disini----------------------->

    Ingin blognya bagus???? gak usah bingung, kalo pengen blognya bagus seperti

    www.andidwih.blogspot.com
    www.smuten.blogspot.com
    www.kolom-tutorial.blogspot.com

    Memang tepat tempatnya!!!!!!!!!!!!

    <----------------------selesai------------------------------>

    Setelah itu comment ke beberapa blog dengan tulisan diatas.

    Pada url pertama, tuliskan blog anda.
    Pada url kedua, tuliskan www.andidwih.blogspot.com
    Lalu, pada url ketiga, tuliskan blog favorit anda.

  • ANDIE

    wah mantep infonya...kerennnn
    Aq punya trik cepet ngumpulin traffic di blog kamu!!!!

    <---------------------Copy disini----------------------->

    Ingin blognya bagus???? gak usah bingung, kalo pengen blognya bagus seperti

    www.andidwih.blogspot.com
    www.smuten.blogspot.com
    www.kolom-tutorial.blogspot.com

    Memang tepat tempatnya!!!!!!!!!!!!

    <----------------------selesai------------------------------>

    Setelah itu comment ke beberapa blog dengan tulisan diatas.

    Pada url pertama, tuliskan blog anda.
    Pada url kedua, tuliskan www.andidwih.blogspot.com
    Lalu, pada url ketiga, tuliskan blog favorit anda.

  • Nias Zalukhu

    Tutorialnya keren.. but iframe ga disuka ama om google lho hehehe

  • Diary Pink

    hehehe... gak mudeng dgn iframe.... gak ikutan ah.. hehe..

  • iwak kakap

    Wah bisa diterapkan di email for me

  • Everythings You Need

    jikalaunya saya ingin dua web yang ada di dalam iframe itu gimana mas? :c:

  • Kenny Dimitra

    wow info ini berguna bgt...ini dia yg selama ini aku cari...thx ya mas...mampir juga ya di blog ku yg sederhana

  • Posting Komentar

    Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

    Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

    Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

    Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)