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 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 membuat textarea dengan tombol "select all"Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk men ... 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
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• CSS LINKPenggunaan css pada fitur css link sangat bervariasi. Ada banyak fungsi pada fitur css link, kita bisa mengatur warna link, warna latar pada link, merubah warna pad ... readmore