Nah kali ini saya akan membagi cara membuat subscribe box yang akan muncul ketika halaman di-scroll dan dilengkapi dengan tombol close. Dan jika pengunjung melakukan pendaftaran email dengan meng-klik tombol "Subscribe" maka kotak tidak akan muncul lagi selama 7000 hari ke depan selama belum menghapus cookie browser.
Dan subscribe box ini saya menggunakan Mailchimp, untuk cara menggunakan Mailchimp sebagai content delivery atau untuk mengkonversi rss to email. Untuk setting Mailchimp silahkan simak postingan ini.
Demo bisa dilihat di blog ini atau di Demo JSFiddle.
Untuk mencoba menggnakannya silahkan ikuti langkahnya di bawah ini.
Silahkan simpan kode css di bawah ini di atas kode
</head>
<style type='text/css'>
/*<![CDATA[*/
#site-subs{display:block;padding:15px;background:#fff;border:1px solid #dedede;border-right:0;border-bottom:0;border-radius:5px 0 0;position:fixed;bottom:0;right:0;-webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);-moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);z-index:1000000}
#mc_embed_signup{clear:left;font:16px Helvetica,Arial,sans-serif;width:100%}
#mc_embed_signup .button,#mc_embed_signup input.email{box-sizing:border-box;height:42px;line-height:42px;width:100%}
#mc_embed_signup form{text-align:left;padding:0}
.mc-field-group{display:inline-block}
#mc_embed_signup input.email{font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;font-size:.9em;border:1px solid #ABB0B2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#343434;background-color:#fff;padding:0 .8em;display:inline-block;margin-bottom:10px;vertical-align:top}
#mc_embed_signup .button:active,#mc_embed_signup .button:focus,#mc_embed_signup input.email:active,#mc_embed_signup input.email:focus{outline:0}
#mc_embed_signup label{display:block;font-size:20px;padding-bottom:10px;font-weight:700;color:#666}
#mc_embed_signup .our,#mc_embed_signup .to{font-family:Georgia;font-weight:400;font-size:22px}
#mc_embed_signup .get{font-family:Georgia;font-weight:400;font-size:16px}
#mc_embed_signup .clear{display:block;width:100%}
#mc_embed_signup .to{font-style:italic}
#mc_embed_signup .button{font-size:.9em;font-weight:700;border:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;letter-spacing:.03em;color:#fff;background-color:#333;padding:0 18px;display:inline-block;margin:0;transition:all .23s ease-in-out 0s}
#mc_embed_signup .button:hover{background-color:#007acc;cursor:pointer}
#mc_embed_signup div#mce-responses{float:left;top:-1.4em;padding:0 .5em;overflow:hidden;width:90%;margin:0 5%;clear:both}
#mc_embed_signup div.response{margin:1em 0;padding:1em .5em .5em 0;font-weight:700;float:left;top:-1.5em;z-index:1;width:80%}
#mc_embed_signup #mce-error-response{display:none}
#mc_embed_signup #mce-success-response{color:#529214;display:none}
#mc_embed_signup label.error{display:block;float:none;width:auto;margin-left:1.05em;text-align:left;padding:.5em 0}
.slideUpbox{-webkit-animation-name:slideUpbox;animation-name:slideUpbox;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideUpbox{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideUpbox{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.close-shareOnscroll{position:absolute;top:-20px;right:10px;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:25px;color:#555;height:25px;line-height:25px;text-align:center;background:#fff;border:1px solid #dedede;border-radius:100%}
@media screen and (max-width:414px){#site-subs{width:100%;border-radius:0;border-left:0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
}
/*]]>*/
</style>Kemudian silahkan simpan kode javascript ini di atas kode
</body>
<script>
//<![CDATA[
var appended = false,
bookmark = document.createElement("div");
bookmark.id = "subscribeOnscroll";
bookmark.innerHTML = '<div id="site-subs" class="slideUpbox">\
<div id="mc_embed_signup">\
<form action="URL EMBEDDED SIGNUP FORM MAILCHIMP" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>\
<div id="mc_embed_signup_scroll">\
<label for="mce-EMAIL">SUBSCRIBE <span class="to">to</span> <span class="our">Our News Letters</span><br/>\
<span class="get">Get hottest posts into your inbox</span></label>\
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>\
<div style="position: absolute; left: -5000px;" aria-hidden="true">\
<input type="text" name="KODE UNIK DI SINI" tabindex="-1" value="">\
</div>\
<div class="clear"></div>\
<input type="submit" value="Subscribe" onclick="hidesubscribebox()" name="subscribe" id="mc-embedded-subscribe" class="button">\
</div>\
</form>\
</div>\
<div class="close-shareOnscroll" onclick="hidesubscribe()">×</div>\
</div>\
';
function hidesubscribe(){document.getElementById("subscribeOnscroll").style.display="none"}function hidesubscribebox(){document.getElementById("subscribeOnscroll").style.display="none",createCookie("hideDialog","hide",7000)}function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("subscribeOnscroll").style.display="none"))};
//]]>
</script>Ganti kode
URL EMBEDED SIGNUP FORM MAILCHIMP dengan URL dari signup form Mailchimp (Embedded form) kemudian ganti juga KODE UNIK DI SINI dengan kode unik dari signup form tersebut.Angka
7000 untuk lamanya cookie dan 800 untuk tinggi kemunculan kotak ketika di-scroll.Selamat mencoba....