POP-UP
Pop-Up merupakan sebuah Pesan yang akan otomatis tampil di tengah-tengah layar monitor kita ketika sedang berkunjung ke sebuah web atau blog tertentu.
Nah pada artikel ini mimin bakal share sedikit tutorial Cara Membuat Pesan POP-UP Sederhana,Yuk...dari pada menunggu lama ,mending kita langsung saja simak tutorialnya dibawah .
Langkah pertama ,copy kode dibawah ini dan pastekan di aplikasi text editor kalian .
Simpan dengan nama pop-up.html
<html>
<head>
<title>MENU POP-UP</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Patrick+Hand|Droid+Sans+Mono" rel="stylesheet">
</head>
<body>
<div class="popup">
<div id="box">
<a class="close" href="#">CLOSE</a>
<h2>SELAMAT DATANG</h2>
<p>blog berisi tutorial dan informasi lainnya.<br>sharing that info is the best</br></p>
</div>
</div>
<h1>PENGERTIAN POP UP</h1>
<hr width="50%" align="left"/>
<h3>Menu pop up adalah menu yang akan tampil secara otomatis atau apabila kita menggerakan kursor mouse pada area tertentu,biasanya berisi tentang informasi suatu objek/icon/menu.</h3>
</body>
</html><style type="text/css">
body{
width:100%;
height:100%;
margin:0;
padding:0;
background:#fff;
background:url('');
}
h1{
color:#d44e4e;
font-family:'Droid Sans Mono', cursive;
}
div.popup{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background: rgba(212,0,0,.78);
}
div#box{
margin:5% auto;
width:320px;
height:190px;
-webkit-box-shadow:0 0 20px #666;
-moz-box-shadow:0 0 20px #666;
box-shadow:0 0 20px #666;
border-radius:5px;
border:#d44e4e 1px solid;
background:#19CCD5;
}
a.close{
text-decoration:none;
color:#fff;
margin:1px 1px;
float:right;
background:#a11f1f;
border:#2b2b2b 1px solid;
font-family:Droid Sans Serif;
font-size:20px;
border-radius:5px;
}
a.close:hover{
background:#000;
color:#a11f1f;
border:#a11f1f 1px solid;
}
p{
color:#fff;
font-family:'Droid Sans Mono', cursive;
text-align: left;
margin-left:5px;
}
h3{
color:#444;
font-family:'Droid Sans Mono', cursive;
}
h2{
color:#fff;
margin-left: 5px;
margin-top: 0px;
font-family:'Droid Sans Mono', cursive;
text-align: left;
}
</style>Atribut type digunakan untuk menentukan tipe media Internet (sebelumnya dikenal sebagai tipe MIME) dari tag <style>.
Atribut type mengidentifikasi konten antara tag <style> dan </style>.
Nilai "text / css" menunjukkan bahwa kontennya adalah CSS.
Baca Juga:Cara Membuat menu DropDown SederhanaSelanjutnya kita menambah kan Tag <script>,karena tag ini digunakan untuk mendefinisikan skrip sisi klien (JavaScript).Element <script> berisi pernyataan skrip, atau menunjuk ke file skrip eksternal melalui atribut src.
Penggunaan umum untuk JavaScript biasanya untuk manipulasi gambar, validasi formulir, dan perubahan konten yang dinamis.
Copy javascript dibawah ini.
<script type="text/javascript" src="http://aarkayfoods.in/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>Sekarang tinggal save dan coba jalankan file pop-up.html di browser kalian .
Maka tampilannya akan seperti dibawah ini.
Ok sekian dulu artikel kali ini .bila ada kesalahan pengetikan saya mohon maaf.
Masih belum paham ?
Koment dibawah ,siapa tau bisa dibantu:)
Comments
Post a Comment