Cara Membuat Widget Email Subscription Box Efek Popup di Blogger yang Praktis dan Menarik

Widget Email Subscription Box Efek Popup

Widget ini bisa menjadi salah satu cara untuk memudahkan pengunjung blog berlangganan artikel terbaru melalui email. Dengan begitu, pengunjung yang tertarik dengan konten blog kamu bisa mendapatkan informasi terbaru tanpa harus terus-menerus membuka halaman blog secara manual.

Widget Email Subscription Box ini memiliki tampilan popup yang cukup praktis. Berbeda dengan popup pada umumnya yang langsung muncul secara otomatis ketika pengunjung membuka halaman, widget ini hanya akan ditampilkan ketika pengunjung mengklik tombol yang telah disediakan. Jadi, pengunjung bisa memilih sendiri kapan mereka ingin membuka formulir berlangganan tersebut. Cara ini tentu lebih nyaman karena tidak terlalu mengganggu aktivitas pengunjung saat sedang membaca artikel.

Kamu dapat mencoba meletakan widget ini ditempat terbaik menurut kamu, misalnya widget blogger di dalam HTML template blog, dan lain sebagainya.

Popup Email Subscription

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEfHM8RCbMc77RE9awHzV3banUDql5lkZDGG5C8N_zxdQWZFs1H0OYlaeQ94W8Dx8-JVAN7nIUqzF_H9aEHyCqhLSQjSue8ZZmbbEULcdtm_DitGAPGw_rZHHMjB5IazB5zck2tpuZM1c/s1600/seocipsname.jpg); background-repeat:no-repeat; background-position:5px 7px; }
#email { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjxypNOCONjUcVQ5XGslFI5aZY5oWxyX4VcLtIsJ49LruGGjdEBLOznP20CReEfbsmf6N6LoJxPRYK2m4iqHijKk_eETwE8J-ZuQnTqIF_YXYWXRb2Qb-hyh9MWt50b50e8FkDUGgB-4/s1600/seocipsemail.png); background-repeat:no-repeat; background-position:5px 7px; }
textarea { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhCegc77mR52QDe2sBkLgnhO_IdvV615l1vVF1XtptZkODhmS8CKM4bl09qes9JUA5a9AUrR57_jGZqjmTIS4ewpnGc236MBVGUNpAjUogv-JeOYbzgDx6UWOlGY38B3PCfBgup4wso0/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">

<div id="popupContact">

<form action="#" id="form" method="post" name="form">
<img id="close" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rLUHsCAUF0aQFCY3S_QQtMdGH-WbqyITK1ADIzAqMbmdTtuPwe8BokN9TdKEK_CNrSGToe-PLyHLVdhyphenhyphen7furQnMdH8Uv-rmGhtmciR_d0GD1BWGbSrNehhMKSfo2CmxIWpBkrQBbJJY/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>

</div>
<button id="popup" onclick="div_show()">BERLANGGANAN</button>

Nah bagaimana sobat keren bukan?

Dari segi cara kerja, widget ini menggunakan JavaScript dengan metode onclick untuk menampilkan formulir ketika tombol diklik. Saat tombol tersebut ditekan, kotak popup akan muncul di layar sehingga pengunjung dapat melihat formulir yang tersedia. Efek ini membuat tampilan widget terasa lebih interaktif dan tidak memerlukan ruang permanen yang besar pada halaman blog.

Nah, buat kamu yang ingin mempercantik tampilan Blogger sekaligus menyediakan fitur berlangganan email, widget ini bisa menjadi pilihan yang menarik.