Cara Membuat Pop Up Iklan Menggunakan HTML
Yosa AP
---
Tutorial Membuat Pop Up Iklan di HTML - Pada artikel sebelumnya sudah saya jelaskan terkait dengan pengertian dan fungsi Pop Up. Salah satu jenis Pop Up adalah Pop Up iklan. Pop Up iklan sering kita jumpai di website atau blog berita. Apabila kita sedang membaca berita lalu tiba-tiba muncul jendela layang maka bisa dikatakan bahwa itu adalah Pop Up iklan. Pop Up iklan biasanya memberikan suatu penawaran dimana pembaca disuruh untuk memilih ya dan tidak. Apabila memilih ya maka pembaca akan redirect ke konten iklannya. Apabila tidak maka Pop Up iklan akan menutup.
Untuk membuat Pop Up iklan kita membutuhkan HTML, CSS dan Javascript.
 |
| Membuat Pop Up iklan di HTML |
Untuk melihat tampilan Pop Up iklan yang akan kita buat silahkan klik pada tombol dibawah ini.
×
Jika sudah melihat tampilan Pop Up iklan, mari kita mulai tutorialnya.
Daftar Isi :
Alat dan Bahan
Alat dan bahan yang perlu disiapkan ketika ingin membuat Pop Up iklan adalah sebagai berikut.
1. HTML Editor
Baca Juga : Cara Membuat Pop Up Menggunakan HTML
Cara Pembuatan
Cara pembuatannya cukup mudah, dibawah ini sudah ada skrip HTML yang bisa kalian copy lalu salin ke HTML Editor. Kalian bisa mengedit sepuasnya di HTML Editor sesuai dengan keinginan kalian mulai dari jenis font, warna font, background, ukuran backgorund dan lain sebagainya.
<html>
<style>
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 20%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
.cancelbtn, .deletebtn {
float: left;
width: 50%;
}
.cancelbtn {
background-color: #ccc;
color: black;
}
.deletebtn {
background-color: #04AA6D;
}
.container {
padding: 16px;
text-align: center;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
background-color: #474e5d;
padding-top: 10px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 80%;
height: 80%;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.fontjudul{
font-size: 25px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
@media screen and (max-width: 300px) {
.cancelbtn, .deletebtn {
width: 100%;
}
}
</style>
<center><button onclick="document.getElementById('id01').style.display='block'">Klik Disini!</button></center>
<div class="modal" id="id01">
<span class="close" onclick="document.getElementById('id01').style.display='none'" title="Close Modal">×</span>
<form action="/action_page.php" class="modal-content">
<div class="container">
<div class="fontjudul">Selamat Datang!</div>
<br />
<p>TutorialKomputer.net</p>
<p>Mau dapat info terupdate tutorial setiap hari dari web ini?</p>
<br />
<div class="clearfix">
<button class="cancelbtn" onclick="document.getElementById('id01').style.display='none'" type="button">Mau Aja!</button>
<button class="deletebtn" onclick="document.getElementById('id01').style.display='none'" type="button">Mau Banget!</button>
</div>
</div>
</form>
</div>
<script>
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</html>
Apabila kalian ingin memasang Pop Up iklan di blog kalian, kalian bisa membaca tutorial tentang cara mudah memasang Pop Up iklan di Blogspot.
Sekian untuk tutorial tentang cara membuat Pop Up iklan di HTML.Selamat mencoba dan sampai jumpa di tutorial selanjutnya ya.
Posting Komentar
Posting Komentar