Cara Membuat Popup Window Script: Panduan BloGGeR Informasi Alternatif

Panduan BloGGeR atau Tutorial BloGGeR tentang "PopUp Window" dimaksudkan untuk bisa memberikan pilihan alternatif penyampaian informasi oleh blogger dalam bentuk yang berbeda. Popup Window secara sederhana bisa digambarkan sebagai window dalam ukuran lebih kecil (karena bisa dibuat menjadi sangat kecil) yang nantinya akan muncul di window (jendela/halaman) yang sedang di buka.

D E M O

Langkah pembuatan Popup Window :

1. login ke Blogger.
2. Halaman Dasbor :
   Klik "RAncangan (Design)".
3. Klik "Edit HTML"
4. Amankan template atau Backup Template.
5. Cari kode ]]></b:skin>
6. Copy dan paste-kan javascript di bawahnya.
7. Klik "Simpan Template (Save Template)"
8. Buat posting dengan xHTML popup window.
9. Buka blog untuk melihat hasilnya.
10. Selesai.

Javascript PopUp Window

<script type="text/Javascript">
//<![CDATA[
function popup_window(url,w,h){
var width=w;
var height=h;
var from_top=150;
var from_left=250;
var toolbar='no';
var location='no';
var directories='no';
var status='no';
var menubar='no';
var scrollbars='yes';
var resizable='yes';
var atts='width='+width+'show,height='+height+',top='+from_top+',screenY=';
atts+= from_top+',left='+from_left+',screenX='+from_left+',toolbar='+toolbar;
atts+=',location='+location+',directories='+directories+',status='+status;
atts+=',menubar='+menubar+',scrollbars='+scrollbars+',resizable='+resizable;
window.open(url,'win_name',atts);
}
//]]>
</script>

xHTML PopUp Window

<a href="javascript: popup_window('URL',440,400)">Link Title</a>

Sampel xHTML

<a href="javascript: popup_window('http://gubhugreyot.comyr.com/iframe/popup-window-script.html',550,400)">Teks Link</a>

Catatan/Keterangan :

• var from_top=150; var from_left=250; digunakan untuk mengatur posisi popup window.
• Nilai 440,400 dalam xHTML digunakan untuk mengatur lebar (width) dan tinggi (height) popup window.
• Link_Popup-Window diisi dengan URL dari Link yang akan di tampilkan dalam popup window.
• Judul/Nama berisi Nama Link yang akan ditampilkan di popup windows.
• Upload javascript di file hosting untuk lebih memperingkas KODE dalam template !
• Panduan backup template, cari kode dan berbagai cara menyimpan kode dapat dibuka di Special Tutorials, menu sebelah kiri halaman!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Seloso    LEGI, Maret, 13, 2012

» Happy Blogging - gubhugreyot «