Popup Email Subscription Widget for Blogger

HaiSob, pada kesempatan ini saya akan membagikan sebuah widget Blogger yaitu widget Email Popup Subscription Box. Form kontak ini akan tersedia pada setiap halaman blog kamu, jika kamu menempatkannya di letak yang benar, misalnya dibawah postingan.

Di sini popup akan terlihat jika pengunjung mengiginkannya, jadi tidak akan mengganggu pengunjung seperti popup yang muncul secara otomatis. Widget email subscription ini Ketika pengguna mengklik tombol popup, bentuk akan muncul dan muncul pada layar menggunakan JavaScript onclick event.

Widget Email Subscription Box Efek Popup


Widget Email Subscription Box Efek Popup
Widget Email Subscription Box Efek Popup

Kamu dapat mencoba meletakan widget ini ditempat terbaik menurut kamu, misalnya dibawah postingan dan lain sebagainya.
<style>
#abc { width:100%; height:100%; opacity:.95; top:0; left:0; display:none; position:fixed; background-color:#313131; overflow:auto; }
img#close { position:absolute; right:-14px; top:-14px; cursor:pointer; }
div#popupContact { position:absolute; left:50%; top:17%; margin-left:-202px; font-family:'Raleway',sans-serif; }
form { max-width:300px; min-width:250px; padding:10px 50px; border:2px solid gray; border-radius:10px; font-family:raleway; background-color:#fff; }
p { margin-top:30px; }
h7 { font-size:20px; background-color:#FEFFED; padding:20px 35px; margin:-10px -50px; text-align:center; border-radius:10px 10px 0 0; }
hr { margin:10px -50px; border:0; border-top:1px solid #ccc; }
input[type=text] { width:82%; padding:10px; margin-top:30px; border:1px solid #ccc; padding-left:40px; font-size:16px; font-family:raleway; }
#name { background-image:url(http://4.bp.blogspot.com/-RfldySPomj0/VK39WJLjGpI/AAAAAAAAC6M/C5k1qK3UxOc/s1600/seocipsname.jpg); background-repeat:no-repeat; background-position:5px 7px; }
#email { background-image:url(http://2.bp.blogspot.com/-zjir5I2wHrc/VK39UVYKZeI/AAAAAAAAC6A/yyxPGqxFtD4/s1600/seocipsemail.png); background-repeat:no-repeat; background-position:5px 7px; }
textarea { background-image:url(http://1.bp.blogspot.com/-fnvlaE9BNxM/VK39Ttd-_8I/AAAAAAAAC54/L3nEpoU186U/s1600/seocipsmsg.png); background-repeat:no-repeat; background-position:5px 7px; width:82%; height:95px; padding:10px; resize:none; margin-top:30px; border:1px solid #ccc; padding-left:40px; font-size:16px; font-family:raleway; margin-bottom:30px; }
#submit { text-decoration:none; width:100%; text-align:center; display:block; background-color:#FFBC00; color:#fff; border:1px solid #FFCB00; padding:10px 0; font-size:20px; cursor:pointer; border-radius:5px; }
span { color:red; font-weight:700; }
button { width:20%; height:45px; border-radius:3px; background-color:#cd853f; color:#fff; font-family:'Raleway',sans-serif; font-size:18px; cursor:pointer; }
</style>
<script src='https://seocipsokbanget.googlecode.com/svn/popupwidget.js' type='text/javascript'/></script>
<script type='text/javascript'>
function check_empty() {
if (document.getElementById('name').value == "" || document.getElementById('email').value == "" || document.getElementById('msg').value == "") {
alert("Fill All Fields !");
} else {
document.getElementById('form').submit();
alert("Form Submitted Successfully...");
}
}
//Function To Display Popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
</script>
<div id="abc">
<!-- Popup Div Starts Here -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="http://4.bp.blogspot.com/-S6k2pmlyKFk/VK39Td03FLI/AAAAAAAAC50/5m3v2NPBQvs/s1600/seocipsclose.png" onclick="div_hide()" />
<h7>Contact Us</h7>
<hr />
<input id="name" name="name" placeholder="Name" type="text" />
<input id="email" name="email" placeholder="Email" type="text" />
<textarea id="msg" name="message" placeholder="Message"></textarea>
<a href="javascript:%20check_empty()" id="submit">Send</a>
<br/>
<div style='margin-left:0px;text-align:right;font-size:3px'>
    <a class='widgetku' href='http://www.haisob.com' id='widgetku' target='blank'>Get this widget</a>
</div>
</form>
</div>
<!-- Popup Div Ends Here -->
</div>
<button id="popup" onclick="div_show()">BERLANGGANAN</button>
Nah bagaimana sobat keren bukan?

Jika anda tertarik baca juga cara membuat Widget Email Subscription dibawah artikel dan widget berlangganan Flat design. Sekian widget yang dapat dibagikan untuk saat ini, semoga bermanfaat.
Join This Site