Cara Membuat Pop Ups Auto Tampil Otomatis
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 -->
- Taruh bagian CSS dan code diatas kedalam tempate blog kalian.
- Taruh javascript kalian kedalam tata letak dan pilih Widget "Javascript"
0 komentar