Cara Membuat Auto Pop Up Menggunakan HTML dan CSS
Pop Up merupakan sebuah jendela yang muncul pada halaman sebuah website pada saat user atau pengunjung membuka sebuah website, Auto Pop Up biasanya digunakan untuk memasang sebuah iklan-iklan yang terdapat pada website tersebut, nah pada pembahasan kali ini kita akan mebahas Cara Membuat Auto Pop Up Menggunakan HTML dan CSS, cara kerja dari Auto Pop up ini yaitu ketika pengunjung ingin mengunjungi sebuah halaman website, maka secara otomatis akan muncul sebuah jendela pop-up yang terdapat pada website tersebut.
Cara Membuat Auto Pop Up Menggunakan HTML dan CSS, langkah pertama kita akan membuat file html untuk strukturnya dan file CSS untuk mengatur layout atau tampilan dari pop up yang akan kita buat, tanpa berlama-lama kita yang pertama kita akan membuat file indexnya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Cara Membuat Auto Pop Up Menggunakan HTML dan CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <article> <h1>Cara Membuat Auto Pop Up Menggunakan HTML dan CSS</h1> </article> <!-- start popup --> <div id="close"> <div class="container-popup"> <form action="#" method="post" class="popup-form"> <img src="http://files.wacana.siap.web.id/content/uploads/2016/06/kursus-desain-jakarta.jpg" alt=""> </form> <a class="close" href="#close">close</a> </div> </div> <!-- end popup --> </body> </html>
Setelah kita membuat file index.html berikutnya kita akan membuat file CSS untuk mengatur layout atau tampilannya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css
*{margin: 0; padding: 0}
@keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
#close {
background-color: rgba(64, 68, 65, 0.5);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
animation:autopopup 3.5s;
}
#close:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}
@media (min-width: 768px){
.container-popup {
width:30%;
}
}
@media (max-width: 767px){
.container-popup {
width:30%;
}
}
.container-popup {
position: relative;
margin: 5% auto;
padding: 4px 3px;
background-color: #e1fff5;
color: #333;
border-radius: 8px;
}
.container-popup img {
width: 100%
}
.close {
position: absolute;
top:3px;
right:3px;
background-color: #33898B;
padding:7px 10px;
font-size: 15px;
text-decoration: none;
line-height: 1;
color:#fff;
}
Berikutnya silahkan di save semua filenya jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini
Bagaimana teman-teman cukup mudah bukan, Cara Membuat Auto Pop Up Menggunakan HTML dan CSS-nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Auto Pop Up Menggunakan HTML dan CSS.
Semoga bermanfaat.
Terimakasih.
gak bisa
BalasHapusiya nih om....
Hapus