Sunday, January 7, 2018

Cara Membuat Pop Ups Auto Tampil

Muhammad Kanzhul Umal JavaScript January 07, 2018

Cara Membuat Pop Ups Auto Tampil

Pop Ups - Merupakan salah satu teknik yang dipakai oleh semua orang yang menggeluti di bidang website untuk menonjolkan sebuah metode yang butuh di tonjolkan agar pengunjung dapat mengetahuinya, contoh produk yang di tonjolkan adalah : Form langganan, Iklan, Service, Jadwal dll sebagainya yang dirasa bagi developers website tersebut membutuhkan sentuhan banyak pengunjung.

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"

Saya rasa cukup dari artikel saya yang berjudulkan Cara Membuat Pop Ups Auto Tampil.
Bagi anda yang sebagai pembuat website mungkin ini sangatlah penting bagi anda untuk diketahui.

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