Mailchimp Subscribe Box Show Onscroll With Cookie

Salah satu cara untuk mendapatkan pembaca setia konten blog adalah dengan menggunakan kotak langganan email atau subscribe box. Pelanggan konten akan mendapat kiriman konten terbaru atau pemberitahuan tentang konten terbaru setiap konten terbaru diterbitkan atau bisa juga mendapatkan kiriman konten terjadwal.

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()">&#215;</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....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments