Mailchimp Subscribe Box Show Onscroll With Cookie

Salah satu cara untuk mendapat pembaca setia konten blog yakni dengan memakai kotak langganan email atau subscribe box. Pelanggan konten akan mendapat kiriman konten terbaru atau pemberitahuan perihal konten terbaru setiap konten terbaru diterbitkan atau sanggup juga mendapat kiriman konten terjadwal.

Nah kali ini aku akan membagi cara menciptakan subscribe box yang akan muncul dikala halaman di-scroll dan dilengkapi dengan tombol close. Dan bila pengunjung melaksanakan registrasi 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 aku memakai Mailchimp, untuk cara memakai Mailchimp sebagai content delivery atau untuk mengkonversi rss to email. Untuk setting Mailchimp silahkan simak postingan ini.

Demo sanggup dilihat di blog ini atau di Demo JSFiddle.

Untuk mencoba menggnakannya silahkan ikuti langkahnya di bawah ini.

Silahkan simpan instruksi css di bawah ini di atas instruksi </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 instruksi javascript ini di atas instruksi </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 instruksi URL EMBEDED SIGNUP FORM MAILCHIMP dengan URL dari signup form Mailchimp (Embedded form) lalu ganti juga KODE UNIK DI SINI dengan instruksi unik dari signup form tersebut.

Angka 7000 untuk lamanya cookie dan 800 untuk tinggi kemunculan kotak dikala di-scroll.

Selamat mencoba....


Sumber https://www.kompiajaib.com/

Share this post