Membuatnya cukup simple, nggak banyak coding, namanya juga cuma kotak.
<html>
<head>
<title>Subscription</title>
<!-- POP UP -->
<script type='text/javascript' charset='utf-8' src='jquery.js'></script>
<script type='text/javascript' charset='utf-8' src='popbox.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
<link href="style.css" type="text/css" rel="stylesheet">
<!-- Validasi Email dengan JS -->
<script type="text/javascript">
function validasi()
{
var x=document.getElementById('textbox').value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (x==null || x=="")
{
alert("Isi Email dulu");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Alamat Email tidak valid");
return false;
}
else{
alert("Sukses Berlangganan");
}
}
</script>
</head>
<body>
<div class='popbox'>
<a class='open' href='#'>Langganan!</a>
<!-- kotak POP UP langganan -->
<div class='box'>
<form name="form" method="post" onSubmit="return validasi();">
<div id="outerbox">
<div id="inner">
<div id="text1">Langganan Web ini</div><br>
<input name="email" type="text" id="textbox" size="30" value=""/><br/>
<p>Kirim ke Email ku</p>
<input type="submit" value="Kirim" id="submitbutton">
</div>
</div>
</form>
<!-- kotak POP UP langganan -->
</div>
</div>
<!-- script log file ke langganantxt -->
<?php
if(isset($_POST['email'])) {
$a =$_POST['email']."\n";
$myFile = "langganan.txt";
$fh = fopen($myFile, 'a') or die("file tidak terbuka");
fwrite($fh, $a);
fclose($fh);
header("location:./index.php");
}
?>
</body>
</html>#outerbox{
width:270px;
border: 4px #386CAB dotted;
height:170px;
}
#inner{
width: 260px;
background:#FBFBFA;
height:100px;
float:left;
border-radius: 9px 0 0 9px;
font-family: Verdana;
}
#inner #text1 {
text-align: center;
margin-top: 5px;
font-weight: 600;
}
#textbox{
float:center;
border-color:#F4E148;
border-radius: 10px;
}
#submitbutton
{
width:90px;
height:30px;
border-radius: 5px;
background: #E8E3DD;
float:center;
}
#submitbutton:hover{background: #F5F4F1; }
.text {
font-family: sans-serif;
text-align: center;
font-weight: 300; color:#000;
margin:5px 0 0 0px;
}
a{text-decoration: none;}
.popbox {
margin:10px auto;
text-align:center;
position:relative;
}
.box {margin:20px auto;display:none;}
.open{ border-radius:10px;
background:#386CAB;
padding:5px;
color:#ffffff;}Code lengkapnya, dapat di download disini.
Preview nya bisa dilihat disini : http://testcode.freeiz.com/email/
Instruksi:
#outerbox,#inner width : ukuran sesuai halaman.
#outerbox width : total lebar.
Bagaimana penerapan pada halaman lain :.
Note: jika sudah pakai "jquery.js" gunakan salah satu, ubah sesuaikan nama file css "style.css".
Note: file wajib .php, jika pakai HTML, rename ke PHP.