Cara membuat pop up box

Pop up box adalah salah satu elemen yang sangat berguna pada web ataupun blog. Berbeda dengan pop up windows, Pop up box muncul pada tab atau halaman yang sama, bukan terbuka pada tab windows baru. Pop up box berfungsi untuk menampilkan konten yang berisi seperti gambar, video, form email, form register, form berlangganan artikel, ataupun bisa kita gunakan untuk menampilkan apa saja sesuai kebutuhan web atau blog kita.

Silahkan LIHAT DEMO.

Nah.... bola anda berminat, silahkan anda ikuti langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type="text/javascript"> //<![CDATA[ /***************************/ //@Author: Adrian "yEnS" Mato Gondelle //@website: www.yensdesign.com //@email: yensamg@gmail.com //@license: Feel free to use it, but keep this credits please! /***************************/ //SETTING UP OUR POPUP //0 means disabled; 1 means enabled; var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ //LOADING POPUP //Click the button event! $("#button").click(function(){ //centering with css centerPopup(); //load popup loadPopup(); }); //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); }); //]]> </script> <style type="text/css"> #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ border:2px solid #cecece; z-index:2; padding:10px; margin-top:160px; font-size:13px; -moz-border-radius: 5px; border-radius: 5px; background: -moz-linear-gradient(center top, #ffffff 0%, #cccccc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#ffffff),color-stop(1,#cccccc)); } #popupContact h1{ text-align:center; font-weight:bold; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:2px solid #cccccc; padding:10px; padding:10px; margin-top:0px; margin-bottom:10px; text-shadow: 0.1em 0.1em #000000; background: -moz-linear-gradient(center top, #ffffff 0%, #cccccc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#ffffff),color-stop(1,#cccccc)); } #popupContactClose{ font-size:20px; line-height:14px; right:10px; top:5px; position:absolute; color:#ff0000; font-weight:700; display:block; } #button{ text-align:center; margin:100px; } </style>

Catatan :
Perlu diperhatikan, gadget ini menggunakan jQueri. Jadi bila gadget ini tidak bekerja dengan baik, biasanya terdapat kode javascript / jQueri yang sama pada template anda. Jadi solusinya hapus javascript / jQueri yang ada pada kode diatas pada bagian paling atas. 

Bentuknya seperti berikut, dan silahkan anda hapus :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

6. SIMPAN TEMPLATE
Langkah selanjutnya anda tinggal menambahkan kode HTML yang ada dibawah, pada saat menulis artikel. Jangan lupa, bila ingin memasang gadget ini pada posting anda, silahkan gunakan area Edit HTML, bila sudah selesai, langsung saja terbitkan jangan dibuka area compose. Sebab ada sebaris kode yaitu tag <a> yang otomatis akan berubah, bila dibuka diarea compose.

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="button">
<input type="submit" value="TEKS YANG ADA PADA TOMBOL" /></div>
<div id="popupContact">
<a id="popupContactClose">X</a>
<h1>JUDUL KONTEN POP UP</h1>
<div id="contactArea"></div>

DISINI AREA KONTEN POP UP

</div>
<div id="backgroundPopup">
</div>

Catatan : Warna biru adalah tag <a> yang otomatis akan berubah, bila dibuka diarea compose.
5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "Cara membuat pop up box" Diulas Oleh : Noercholis | Senin, 04 Juli 2011 | 23.22 Description : Pop up box adalah salah satu elemen yang sangat berguna pada web ataupun blog . Berbeda dengan pop up windows , Pop up box muncul pada ... Label : JavaScript,jQuery,Tutorial Blogger Rating : 6.4 Dari 10, Berdasarkan 1500+ Dari 15 000+ Pengunjung.
Sampai saat ini baru ada : 15 komentar >>> Silahkan tambahkan komentar Anda...