Ayo - ayo Indonesia bisa..!!Itu penggalan lagu apa ya sob? Soalnya ane nggak terlalu hafal sama judul lagunya. Tapi pernah dengar syair lagu itu. Lagunya memotivasi sekali ya sob. Bicara soal motivasi, ane ada sedikit motivasi nih sob. "Katakan aku bisa, aku bisa, dan aku bisa". Kata-kata aku bisa diucapkan sampai tiga kali. Tujuannya adalah memancing pikiran bawah sadar kita bahwa kita benar-benar bisa. Pernah lihat Ninja Warrior kan? Coba amati para peserta-nya, mereka sebelum berjuang selalu mengatakan AKU BISA dengan keras sekali kan. Hal itulah yang sering dilakukan orang Jepang untuk memotivasi dirinya. Bagaimana dengan orang Indonesia?
Inilah sedikit intermezo tentang motivasi sebelum membahas ke topik utama yaitu belajar iframe. Tujuannya supaya sobat semangat dan yakin terlebih dahulu bahwa sobat juga bisa.
Iframe
Apa itu iframe? Iframe merupakan definisi dari inline frame. Penggunaannya bisa diletakkan di antara tag <body> dan </body>. Tujuan penggunaan iframe adalah untuk menampilkan page atau halaman website lainnya ke halaman blog kita. Beberapa browser internet sudah mendukung penggunaan tag iframe. Seperti: Mozilla firefox, Internet Explorer, opera, dan Google Chrome. Namun ada beberapa sih yang nggak support iframe.
Tag <iframe> sendiri berjalan pada web-hosting yang berformat html. Sedang pada web-hosting yang berformat xhtml tidak berfungsi. Untuk web-hosting yang berformat xhtml, tag yang diizinkan adalah frame dan frameset. Sudah tahu kan fungsinya tag frame dan frameset?
Sebenarnya sih tag frame dan frameset hampir sama dengan tag iframe. Hanya saja sedikit agak rumit karena berhubungan dengan lay out suatu website. Tag frame dan frameset sendiri sebagai pengganti tag <body> dan </body>. Setelah adanya css ( cascading style sheet ), tag frame dan frameset cenderung tidak digunakan.
Yuk kita mulai saja pembahasan tag iframe dan attribute-attribute yang bisa digunakan.
Format dasar tag iframe adalah <iframe src="url page"></iframe> Jadi tanpa menambahkan attribute sekalipun, dengan tag standar diatas iframe sobat akan bekerja. Namun kadang nggak seindah yang kita inginkan kan sob? Makanya attribute juga perlu ditambahkan.
Berikut attribute yang dapat disematkan pada tag iframe:
1. src="url page" berfungsi untuk memanggil page atau halaman yang ingin ditampilkan pada page sekarang.
2. align="left | right | middle | top | bottom" digunakan untuk memposisikan suatu iframe
3. frameborder="1 | 0" nilai 1 adalah memberikan garis tepi pada iframe, sedangkan 0 tidak diberi garis tepi.
4. scrolling="yes | no | auto" digunakan untuk mengizinkan pengunjung menggulung layar apa tidak.
5. width="pixels | %" digunakan untuk mengatur lebar iframe, bisa dalam pixel atau persen (%).
6. height="pixels | %" digunakan untuk mengatur tinggi iframe, bisa dalam pixel atau persen (%) juga.
7. marginwidth="pixels" digunakan untuk mengatur jarak garis tepi iframe dengan isi pada sisi kanan dan kiri. Ukurannya dalam pixel.
8. marginheight="pixels" digunakan untuk mengatur jarak garis tepi dengan isi pada bagian atas dan bawah.
9. name="name" bisa diisi dengan nama frame yang kita inginkan. Tujuannya adalah jika kita ingin menampilkan page pada frame itu, target lemparan kita adalah nama frame itu.
Contoh penggunaan tag iframe:
<iframe src=http://coker.wen.ru/about.html" align="left" name="iframe_b" frameborder="1" width="100%" height="200" marginheight="10" marginwidth="9" scrolling="yes">your browser not support</iframe>
Tulisan your browser not support ditujukan untuk browser yang nggak bisa membaca tag iframe. Penulisannya berada diantara tag <iframe> dan </iframe>. Bisa juga kita isi dengan link yang kita lempar ke web-page aslinya.
Hasil dari script diatas seperti ini:
Ini tulisanku, mana tulisanmu?
^Original by HP Yitno^
kembali ke atas
hadaaaaaaaaaaaaaaaaaaaaah, lom sampe sana ngeblognya sob. tapi teruslah berbagi, suatu hari nanti pasti saya membutuhkannya :D
BalasHapusTenang sobat, ane akan selalu berbagi selama ane bisa dan mampu. Dengan berbagi ilmu, ilmu kita akan bertambah luas. Termasuk ilmu menggunakan iframe ini sob.
Hapusilmu baru lagi nih, siap diuji coba :)
BalasHapusSilahkan di uji coba perintah-perintah iframe nya kawan. Ilmu baru kalau nggak di praktekkan, nggak ada manfaatnya. Betul nggak sob?
HapusAlhamdulillah nambah ilmu =)
BalasHapusAlhamdulillah kalau tekniknya bermanfaat buat sobat. Langsung di praktekkan aja sob ilmu iframe-nya. Perintah iframe nya di uji coba, supaya makin ngerti fungsi attribute tersebut.
HapusLumayan, nambah2 ilmu sob hehe...
BalasHapusAbsen sob :)
Sedikit ilmu, tapi kalau dibagikan malah akan bertambah ilmu kita sob. Jadi teruslah berbagi ilmu walau secuil sekalipun :)
Hapusalhamdulillah dapat tambahan ilmu mempercantik tampilan blog dengan iframe di sini..terimakasih sobat sudah berbagi info :-)
BalasHapusHe..he...
HapusSebenarnya sudah pernah otak-atik iframe, tapi baru berhasil di eksekusi dengan baik ya sekarang ini. Semua karena dukungan wen.ru yang bebas iklan dan bebas merancang sesuka kita. Jadi web-page yang kita panggil sesuai keinginan kita.
Pernah nyoba manggil page di blogspot sendiri, tapi isi page dari mulai header sampai footnote keluar semua, kan tampilannya nggak indah dan nggak sesuai keinginan kita kan sob.
wah posting yang menarik sekali Sir :D
BalasHapusMakasih mbak Ida. Hasil praktek menggunakan iframe, terus ane share kok mbak. Siapa tahu bermanfaat. Dengan mengenal perintah iframe , kita juga dapat membuat blog kita jadi menarik kan?
Hapusmmh.. itu buat nampilin postingan sebelumnya ya om? tapi bisa di beri link itu?
BalasHapusYups betul sekali sobat. Iframe nggak hanya berguna menampilkan postingan sebelumnya aja sob. Menampilkan website orang lain ke dalam blog kita juga bisa. Asal tau alamat url-nya aja sob. Tapi yang perlu diperhatikan, seandainya website yang kita panggil loadingnya lama, blog kita nantinya loadingnya juga lama.
HapusPaling enak menggunakan iframe adalah page yang kita rancang sendiri. Nggak ada header dan iklan yang mengganggu tentunya. Untuk itulah ane memilih wen.ru sob.
mantap tutor nya mas,aku follow blog ini
BalasHapusMakasih sobat telah berkenan follow blog yang terbilang masih baru ini. Semoga artikel yang ane sajikan bermanfaat buat sobat dan orang lain.
HapusBtw sudah paham kan cara menggunakan tag iframe ?
keren tutorialnya, makasih sudah berbagi ya mas.....
BalasHapusHe..he..
HapusMakasih mbak Alaika Abdullah :)
Hanya tutorial sederhana menggunakan iframe tag kok mbak. Kalau ane bisa, blogger yang lain seharusnya juga bisa. Tinggal kreatifitas sang blogger aja bisa memanfaatkan iframe tag ini apa tidak?
kira-kira diriku bisa ga yah ngikutin tutorialnya?
BalasHapushehe di coba deh,
Pasti bisa sob.
HapusMasa ada tutorialnya nggak bisa. Yang ada nggak mau nyoba. Tinggal copy paste script yang ane share aja, script iframe langsung bekerja. Nanti tinggal ganti aja url-nya dengan url yang ingin sobat tampilkan di blog sobat.
Sangat sederhana sekali kan script iframe nya.
Kalau javascript tuh baru susah. Ane lagi mempelajari javascript nih sob.
itu sebetulnya mau nampilin apa?
BalasHapusAne lagi posting tutorial membuat iframe pada postingan blogspot sob. Nah halaman website yang mau ane tampilin adalah page yang berada di alamat url:coker.wen.ru salah satu website percobaan saya gituuu. Masak nggak kelihatan sih sob, padahal sudah ane uji coba di operamini dan mozilla firefox lho. Sobat pakai browser apa? Jangan-jangan browser sobat nggak support tag iframe?
HapusSaleum,
BalasHapusBahas ilmu terus nih kang, salut deh tiap hari selalu dapat ilmu kalau mampir disini. Pokoknya aku senang aja sobnetku banyak yang pintar html, kan suatu saat bisa ditanyain kalau lagi ada masalah.
Ok kang dmilano, siap membantu selama ane bisa dan mampu. Pasti kang dmilano sudah jago memanfaatkan tag iframe ini. Apalagi jebolan wordpress, pasti lebih ngerti ketimbang ane yang masih newbie. Tapi berbagi kepada sesama nggak masalah kan kang?
HapusSiapa tahu ada yang belum bisa, selain buat arsip di blogku juga sih.
Lho masak nggak kelihatan sih sob. Padahal sudah aku tes di operamini sama mozilla firefox lho sob. Kamu pakai browser apa sob?
BalasHapusSebenarnya ane lagi posting cara membuat iframe di postingan blog. Nah yang ane tampilin adalah page yang berada di website saya yang beralamat coker.wen.ru itu sob.
Apa browser sobat termasuk yang nggak support iframe tag ?
---->>> re kunjungan bosss... cuman mau follow koneksiku gak nutut... hehehe... lain kali saya follow mas ....
BalasHapusNggak apa-apa sobat, sudah bersedia mampir ke gubuk ane, ane sudah seneng banget. Salam kenal sobat. Apa nggak sekalian belajar iframe dulu. Buat oleh-oleh di blognya gitu.
HapusHe..he.. ^_^
manteeeebbbb tutorialnya... Agak mumet juga tp pasti suatu saat dicoba :D
BalasHapusOia jd inget pilem yes man,, katakan iya utk smua tantangan heheee :D
He..he..
HapusSekarang atau nanti nggak masalah sob. Yang penting sudah berani mencoba itu sudah bagus. Jangan menyerah sebelum berperang. Iframe kelihatan sulit, tapi sebenarnya sangat mudah jika ditelaah dan dipelajari.
ga mudeng kl yg beginiaaan dey... Bikinin aja yaa..
BalasHapusHe..he..
HapusDicoba dulu aja sob. Masa' nyerah.
Bukannya nggak mau bikinin sih. Kalau ane bikinin, ntar nggak cocok dengan tampilan dan design blognya. Dan satu lagi, berarti tutorial belajar iframe nya sia-sia dong. Ane bikin tutorial ini maksudnya supaya para blogger mania juga bisa membuat sendiri iframe sesuai kebutuhannya sendiri gitu sob.
apa bisa diterapkan di WP ya sob?
BalasHapussalam persahabatan selalu dr MENONE sobat
Intinya, setiap web yang berformat html. Kayaknya bisa diterapkan iframe sob. Kalau xhtml nggak support iframe. Ane sendiri belum nyoba di wordpress untuk tag iframe. Dicoba aja sob, siapa tahu bisa.
Hapusalhamdulillah... apapun itu kalo dicari pasti ketemu, tapi yang ini gk dicari malah dateng sndiri... thanks ya sob atas ilmunya...
BalasHapusperlu di bookmark nih...
Terkadang ilmu itu kita dapatkan asal kita mau mencarinya dan bertanya. Dalam dunia internet, ane sering bertanya sama mbah google. Terkadang juga datang sendiri saat blogwalking. Alhamdulillah kalau ilmu tag iframe ini bermanfaat.
HapusLangsung di praktekkan aja sob ilmu iframe nya.
Permisi, cuman mau share aja nih. ada info lomba bikin artikel. Hadiahnya lumayan ada 2 buah printer laser jet dan voucher. Caranya tinggal like fanpage >> http://www.facebook.com/anugrahpratamacom. Dan ikuti Contest menulis artikelnya.
BalasHapusTerima kasih
Saya setuju dengan mengatakan kata bisa berulang kali dapat memancing alam bawah sadar kita.
BalasHapusSaya ingat kata guru saya semenjak masih SMA yang selalu memotifasi dengan bisa itu.
Okey lanjut ke inframe.
Inframe itu fungsinya buwat apa ya sob ?
Betul sekali itu sob. Mengatakan sesuatu dan melakukannya secara berulang-ulang dapat memancing alam bawah sadar kita. Seperti belajar nyetir, perlu menginjak gas dan sewaktu-waktu juga perlu menginjak rem. Itu yang bekerja adalah alam bawah sadar kita. Karena sudah terbiasa. Jadi secara reflek pun sudah terlatih.
HapusMengenai iframe, iframe berfungsi untuk memanggil suatu halaman website ke dalam postingan kita (seperti: blogspot). Intinya memanggil page url yang lain ke website sekarang yang kita kelola.
Semoga paham dengan penjelasanku sob :)
mantep banged sob tutornya nih...saya juga masih ingi nih belajar kayak gituan..thx sob dah share ya..absen mlam sob :)
BalasHapusYah cuma tutorial biasa sob.
HapusSelanjutnya sang blogger-lah yang harus menunjukkan kreatifitasnya. Dalam iframe, pemanfaatannya lebih berguna daripada tutorialnya.
Betul nggak kawan?
weh masih belum ngerti.. nyimak ajalah dulu
BalasHapusNanti juga paham kawan, asal mau belajar, memahami dan nggak takut untuk mencoba. Semua perlu latihan kawan. Ane dulunya juga cuma menyimak dan copy paste script orang lain. Sekarang mah sudah nggak lagi setelah mengerti basic-nya.
Hapusikut belajar di sini sobat, tanxy
BalasHapusSilahkan sobat kalau mau belajar. Ane juga masih belajar, jadi kita sama-sama belajar html dan iframe. Jangan ragu untuk bertanya jika belum paham. Kalau ane bisa jawab, ane akan jawab. Tapi kalau nggak tahu jawabannya, kita tanyakan saja sama mbah google ^_^
Hapusaku baca pelan2 dl ya.. loadingnya lemot nih klo belajar beginian.. hehehe..
BalasHapusPelan-pelan juga nggak apa-apa sob. Kalau orang jawa bilang," alon-alon waton kelakon".
HapusBelajar iframe juga begitu sob. Pelan-pelan asal nyambung dan paham. Suatu saat mbak cova akan familiar sekali menggunakan perintah iframe ini.
aduh komen apa ya aku gak paham mas
BalasHapusnggak apa-apa sob. Datang dan berkomentar aja, ane dah seneng kok sob. Emang agak lumayan susah sih memahami iframe jika dasar html belum menguasai.
Hapuswah ini biasanya buat iklan juga ya gan. ko ane ga bisa ya gan masang i frame di dalam posting, kemarin ud ku coba berkali kali e. ga bisa juga e. kenapa ya?
BalasHapusane ctrl d dulu gan, mau belajar sekaligus rujukan.
Betul sekali sobat.
HapusIframe biasanya digunakan untuk pemasangan iklan, membuat menu tukar link, guestbook atau chatbox.
Masa sih sob nggak bisa, iframe beda sama frame atau frameset lho sob. Ane pernah nyoba pasang frame, di blogspot nggak bisa. Tapi kalau iframe bisa kok sob. Script yang ada dalam postingan ini kan sama persis dengan script yang berhasil menampilkan web-hosting ane yang berada di url coker.wen.ru sob.
aha! aku belajar yang kayak gini di sekolah, tapi.. masih blm ada niat buat praktek nya, hihi :p
BalasHapusWah jurusan web-designer ya sob. Kenapa nggak digunakan semua ilmunya sob. Emang sih iframe bisa membebani loading blog kita. Asal nggak banyak iframe yang kita pasang nggak masalah sob.
HapusApa lebih tertarik dengan css dan programmer ya sob?
aku cuma anak SMA biasa, bukan SMK ato apalah. hihi. cuma kebetulan ini kan masuk bab HTML gitu di mapel kmputer, gurunya sekilas njelasin tentang ini :)
HapusTapi banyak juga lho anak SMA yang mahir web-designer. Entah mereka belajarnya dimana. Ada yang melanjutkan kuliah di jurusan itu kayaknya. Tapi banyak juga yang belajar secara otodidak. Blog dan websitenya juga keren-keren mbak.
HapusBagus tuh mbak, sudah dikenalkan basic-nya dari SMA. Jadi pemahamannya akan lebih cepat nyambung.
okeh, siip, nanti mau coba-coba ah, thank sob .. :D
BalasHapusSilahkan sobat stupid monkey kalau mau nyoba membuat iframe. Semoga teknik iframe yang ane share bermanfaat dan bisa digunakan dengan baik :)
Hapuskunjungan malam hari kawan...salam sukses selalu :)
BalasHapusMakasih sobat the-xp mau berkunjung kesini (^_^)
HapusPostingannya nggak di update lagi kang. Ilmu tentang dunia komputer. Spesialisasi di sistem operasi apa aja kang? Windows, linux, ubuntu atau apa kang?
oooo,,ini yg namanya iframe toh,,bru tau aq,heheh
BalasHapusYups... Betul sekali.
HapusInilah contoh penggunaan script iframe sob. Masih banyak sebenarnya kegunaannya. Tergantung kita mau memakainya dalam bentuk yang bagaimana?
Setelah tahu iframe, sobat bisa berkreasi dengan mengkombinasikan pengetahuan html yang sobat punya dengan perintah iframe ini.
sip penjelasanya komplit
BalasHapusMakasih sobat dah mau mampir.
HapusSetahuku sih cuma itu sob attribute yang bisa disematkan pada iframe. Barangkali ada attribute lain, silahkan dikoreksi dan ditambahkan. Karena ane tak lebih hanyalah seorang newbie yang sedang belajar dan berbagi (^_^)
sip mas, ini yang lagi saya cari lumayan komplit penjelasannya...
BalasHapusthx sob,lumayan bermanfaat tapiiframe kan mayoritas digunakan buat ads code kan yak?
BalasHapusnah kalo diklik kan langsung ke newtab beralamatkan src:"linktarget"
tu atributnya pakai apa yak? yang disampel diatas tuh kok malah g bisa diklik?
mampir balik ya sob ke blog saya, tapi saya sarankan jangan pas puasa,,heheh thxx,,,
Artikel yang sangat bermanfaat sob, saya sudah praktekkan ini dan ternyata berhasil memuaskan. Terimakasih atas informasinya.
BalasHapus