Cara Membuat Auto Pop Up website Menggunakan HTML dan CSS

  • 9 November 2020

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 iklan-iklan yang terdapat pada website tersebut.

Nah pada pembahasan kali ini kita akan membahas 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.

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 pada layar anda……

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.
—————————————–
Sumber http: https://www.kursuswebsite.org/cara-membuat-auto-pop-up-menggunakan-html-dan-css/



Kelas-Kelas Pilihan di Udemy Indonesia

Leave a Comment: