Sep 23, 2009

Cara Membuat Popup Window

Contoh 1
Klik sini untuk melihat teman lelaki Eriyza


Contoh 2
Klik sini untuk melihat laman blog Eriyza

Puasa sudah, beraya pun sudah, kini Eriyza kembali lagi meneruskan perkongsian ilmu di blog ini. Kali ini tutorial khusus untuk Daus yang ingin mengetahui cara² untuk membikin pop-up window. Justeru, penulis telah memberikan dua contoh di atas sebagai panduan asas.


Contoh 1

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjgUSBfgkVUpjItv_oEIlXryM7c0IwKu46QN87pyu83ROnDzm4xPWXRJDPBeXzWdKfOW4G8bCaAZ-Ue9vsRylTN21amSXoaX1sYd6PI6ksuqSH2Hk0tshYv3TYZevpD_L2a7sX/s320/mike-44.jpg" onclick="window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjgUSBfgkVUpjItv_oEIlXryM7c0IwKu46QN87pyu83ROnDzm4xPWXRJDPBeXzWdKfOW4G8bCaAZ-Ue9vsRylTN21amSXoaX1sYd6PI6ksuqSH2Hk0tshYv3TYZevpD_L2a7sX/s320/mike-44.jpg','popup','width=300,height=280,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">Klik sini untuk melihat teman lelaki Eriyza</a>
Penulis menggunakan gambar sebagai contoh 1. Tulisan berwarna biru adalah alamat gambar yang ingin digunakan, warna merah pula adalah saiz lebar (width) dan tinggi (height) gambar tersebut manakala warna ungu pula melambangkan penerangan kepada gambar tersebut.

Contoh 2

<a href="http://eriyza.aeropama.com/" onclick="window.open('http://eriyza.aeropama.com/','popup','width=500,height=500,scrollbars=yes,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">Klik sini untuk melihat laman blog Eriyza</a>
Contoh 2 pula penulis menggunakan laman blog. Setiap warna biru, merah dan ungu, caranya lebih kurang sama dengan contoh 1 tadi. Cuma warna hijau sahaja yang membuatkannya sedikit berbeza. Penulis meletakkan 'yes' pada 'scrollbars' bermaksud penulis mahukan skrolbar pada window tersebut boleh digerakkan. Manakala fungsi² yang lain penulis sembunyikan dengan tanda 'no'. Anda boleh menukarnya sendiri sama ada mahu dihidupkan (yes) atau dimatikan (no).

Mudah sahajakan?? Selepas ini, anda bolehlah mencuba membuat pop-up window ini. Sila komen selepas anda membuatnya.

14 Comment

Anonymous

tq kak eriy...
akan dicuba sebentar lagi...

Eriyza Thu Sep 24, 12:00:00 PM

Daus : Sesama.

cheryna zamrinor Thu Sep 24, 01:05:00 PM

macam nieh ke agaknye diorg buat popup ek? tp kan eriy...ada org buat, dan mengganggu windows yg lain...tension betul...

Eriyza Thu Sep 24, 11:00:00 PM

cHeRyNa PiReS : Benda ni pilihan jer Sha tp yg sy ajo ni kena klik baru laa dibukak, bukan automatik kuar.

Anarm Fri Sep 25, 04:42:00 AM

popup window yg otomatik terbukak memang cukup2 annoying.. kalo yg mcm ni ok skit.. smart!

ezanykun Fri Sep 25, 10:04:00 AM

tak penah terfikir lak boleh buat camni.. hehe..

Eriyza Fri Sep 25, 10:40:00 AM

Anarm : Sy pun tak suka automatik pop-up.

Eriyza Fri Sep 25, 10:42:00 AM

ezany : Takpe, benda ni pilihan jer.

KhaL Fri Dec 18, 01:54:00 PM

salam eriyza
info yang menarik. camna nak jadikan kotak shoutmix tu dalam bentuk popup window? sebelum ni kotak shoutmix tu selalunya diletakkan kat sidebar tapi sy ingat nak pindahkan ia dlm bentuk popup window. kalau nak sembang hanya perlu klik je lepas tu akan muncul kotak shoutmix tu

Eriyza Fri Dec 18, 03:06:00 PM

KhaL : Kalo shoutbox awk ada pautan, bleh jer nak wat ia lam bentuk popup window. Cthnya cam - http://shoutbox.chat4all.net/shoutbox/shoutbox.php?u=eriyza

KhaL Fri Dec 18, 03:30:00 PM

tak terpikir lak pasal pautan tu. kene usha jab ni. btw thx ye

Eriyza Fri Dec 18, 09:58:00 PM

KhaL : Okey. Sesama.

Anonymous

slm, kak mcm mana kalo saya nk pop-upkan byk link skali gus? sbb sy dh try..tapi ia jadi sebaris panjang..sy mau buat satu-satu urutan ke bawah..tolong ek kak.

Eriyza Mon Jan 11, 10:26:00 AM

Anonymous : Wsalam. Sy kurang paham soklan kamu. Kalo bleh tunjukkan contoh tuk sy lihat.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.