Mailchimp Subscribe Box Show Onscroll With Cookie

Mailchimp Subscribe Box Show Onscroll With Cookie

Bola Hero Gawai

Mailchimp Subscribe Box Show Onscroll With Cookie

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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

11 Comments Add Comment

wah keren nih..., oia apa subscribe yang lama tetep dipasang juga mas ?

Balas

Mending piih salah satu, pakai FeedBurner atau Mailchimp, kode di atas bisa juga untuk form FeedBurner. Form lama tidak perlu dihapus untuk pilihan lainnya.

Balas

Nahh ini yang saya saya mau cari kemaren Kang Adhy..terima kasih banget nih Kang sdh diposting..hahhayy

Balas

Sama-sama mas :)

Balas

ohh gitu..., terima kasih kang Adhy..., ijin coba dulu... :)

Balas

Makasih mas :)

Balas

Kang, aku mau info iklan, kemarin sudah email kang :)

Balas

Udah ngak perch make MailChimp lagi, sonly email yang gratis kayak GMail ngak bisa berfungsi :(

harus pake email yang dari domainnya ex: admin@kompiajaib.com

Sedih rasanya :(

Balas

Masih bisa, abaikan saja, isi saja dengan email gmail :)

Balas

Keren nih .. :) Izin pake mas Adhy :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×