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.

Judul: Cara membuat pop up box; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore
• Cara membuat slide dengan efek marqueeAnimasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibanding dengan animasi flash. Selain lebih ringan, animasi slide ini dile ... readmore
• CSS MarginProperti CSS margin berfungsi untuk mengatur jarak atau membuat ruang kosong, baik bagian kanan, kiri, atas, dan bawah disekitar elemen seperti box, teks, gambar dl ... readmore
• Cara hanya menampilkan judul posting saja pada halaman depan blogUpdate kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat te ... readmore
• Cara buat slide show CarouselMenambah lagi koleksi slide show, dan slide ini menggunakan efek Carousel atau berputar seperti komedi putar. selain berfungsi untuk menampilkan gambar, slide show ... readmore