Ok sobat seocips.com. Pada kesempatan ini seocips akan membagikan lagi sebuah widget blog. yaitu widget Email Popup Subscription Box For Blogger Blog. Pop up form kontak atau yang lebih kita kenal dengan widget berlangganan artikel adalah cara cerdas untuk menyajikan form kontak di situs Anda. Mirip dengan sliding form kontak, form kontak ini akan tersedia pada setiap halaman situs Anda jika anda menempatkannya di letak yang benar, misalnya dibawah postingan agar pengunjung lebih mudah untuk melihatnya.

Widget Email Subscription Box Efek Popup Untuk Blog

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.

Anda dapat mencoba meletakan widget ini ditempat terbaik menurut anda, misalnya saja 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.seocips.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 atau widget berlangganan Flat design. ok Sekian widget yang dapat dibagikan untuk saat ini, semoga bermanfaat.
0 Komentar untuk "Widget Email Subscription Box Efek Popup Untuk Blog"
New comments are not allowed.