Cara Membuat Pop Ups Auto Tampil

Hai semuanya,
Ada yang mau saya bagikan nih.

ini berkaitan tentang bagaimana cara menampilkan pop ups iklan atau apapun itu dari kita akan muncul di website kita. setelah diakses url/website kita mengharapkan muncul pop ups di depan layar dan memuat konten kita.

disini saya menggunakan Jquerry Function.

oke langsung saja.

Pertama,
Kalian harus menaruh kode berikut diantara <head>...</head> dengan code berikut ini :

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<script type="text/javascript">
 $(document).ready(function(){
 $('a.close').click(function(eve){
 
 eve.preventDefault();
 $(this).parents('div.popup').fadeOut('slow');
 });
 });
</script>

<style type="text/css">
body{
 width:100%;
 height:100%;
 margin:0;
 padding:0;
 }
 div.popup{
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
 width:100%;
 height:100%;
 background: rgba(0,0,0,.8);
 }
 
 div#box{
 margin:5% auto;
 background:#fff;
 width:50%;
 height:50%;
 -webkit-box-shadow:0 0 15px #000;
 -moz-box-shadow:0 0 15px #000;
 box-shadow:0 0 15px #000;
 }
 
 a.close{
 text-decoration:none;
 color:#000;
 margin:10px 15px 0 0;
 float:right;
 font-family:tahoma;
 font-size:20px;
 }
</style>

Keterangan :

Close digunakan untuk nantinya saat ada class="close" maka dia akan menjalankan fungsi close tersebut.

popup nantinya akan digunakan apabila dari <div class="popup" maka nantinya akan otomatis menampakan diri PopUps nya

Untuk bagian CSS bisa kalian edit sesuai keinginan sobat.

Kemudian untuk bagian pemanggil dan tampilannya kalian edit script di bagian atas </body>, sudah saya coba dibawah body ada yang ikut tampil di depan, dan akhirnya saya mencoba di taruh di bawah saja deket dengan </body> dan alhasil PopUps di depan sendiri dan semua konten di belakang PopUps kalian, dan efeknya seperti blur, keren kan sobat.

Taruh sebuah codenya seperti ini :

 <!-- bagian popup -->
 <div class="popup">
 <div id="box">
  
 <a class="close" href="#"><b>X</b></a>
 
TARUH Konten Kalian Disini seperti : Banner, Gambar, Animasi, Iklan, Video, dll sebagainya yang akan kalian jadikan PopUps
 
 </div> 
 </div>
 <!-- akhir dari popup -->

Keterangan :
popup akan otomatis memanggil fungsi popup di atas bagian javascript untuk Menampilkan.
close juga sama akan memanggil fungsi close untuk menutup PopUps.

Maka setelah kalian mencoba membuatnya coba gunakan Xampp atau langsung mencobanya di website kalian.
PopUps ini juga dapat kita gunakan di dalam blogger yaitu dengan cara :

Taruh bagian CSS dan code diatas kedalam tempate blog kalian.
Taruh javascript kalian kedalam tata letak dan pilih Widget "Javascript"

Mungkin cukup sekian dari saya,
Semoga artikel ini dapat membantu dalam mengatasi masalah kalian dalam hal PopUps website atau blog kalian.

PERLU DIKETAHUI

Iklan yang tampil pada halaman situs ini sepenuhnya sudah diatur oleh Pihak Google, kami hanya menyediakan tempat kosong khusus untuk iklan dari Google. Maka, apabila ada iklan yang dirasa kurang baik bagi anda sehingga tidak seharusnya ditampilkan, harap segera menginformasikan hal tersebut kepada kami dengan melalui Formulir Kontak yang ada di bagian bawah sendiri pada situs ini. Kemudian, kami akan segera menyampaikannya pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :