Cara Memasang Widget Berlanggan (Subscribe) Onscroll dengan Cookies

Memasang widget berlanggan sangat penting terlebih jika blog sahabat memang sangat menarik dan butuh sebuah langganan dari pengunjung. Sebenarnya, Ngonline06 telah banyak memberikan tutorial aneka widget berlangganan dengan berbagai macam bentuk dan desain yang menarik. Namun untuk tutorial kali ini, widget berlanggananannya berbeda dari sebelumnya. Widget berlanganan kali ini berbasiskan on scroll, artinya widget ini akan muncul saat discroll ke bawah.

[Untuk sahabat yang belum mendaftarkan blognya di feedburner, silahkan lakukan pendaftaran dengan benar dengan melakukan langkah-langkah disini: Cara Mendaftar Feedburner dengan Benar.]

Selanjutnya, kelebihan lainnya adalah dengan Cookies. Maksudnya, keberadaan widget ini akan selalu muncul selama tombol 'Subscribe' belum diklik.

OK, langsung saja, kami kira sahabat Ngonline06 sudah tidak sabar lagi untuk mengetahui dan menerapkan widget yang spesial ini. Tutorial ini merupakan milik kang Adhy Suryadi.

Untuk membuat dan memasang widget berlangganan (subscribe) onscroll dengan cookies, sahabat cukup melakukannya dengan dua langkah praktis. Berikut cara memasangnya:

Langkah Pertama

Letakkan kode CSS berikut di atas kode </head>

<style type='text/css'>
/*<![CDATA[*/
.subscribe_box2{width:400px;margin:0;padding:0;position:fixed;right:0;bottom:0}
#subscribe-box2{width:100%;height:auto;background-color:#fff;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);box-shadow:0 10px 50px 0 rgba(0,0,0,.25);margin:0;padding:10px 0;border:1px solid #dedede;border-right:0;border-bottom:0;border-radius:5px 0 0}
#subscribe-box2 p{font-size:18px;color:#666;font-weight:300;text-align:center;line-height:20px;padding:10px 20px 0;margin:0}
#subscribe-box2 .emailfield{padding:0 20px 10px}
#subscribe-box2 .emailfield input{color:#777;padding:10px 10px 10px 30px;margin-top:10px;font-size:15px;font-weight:300;width:100%;background:#ebebeb;border:1px solid #ccc;border-radius:4px;box-shadow:rgba(0,0,0,.247059) 0 1px 3px inset,#f5f5f5 0 1px 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#subscribe-box2 .emailfield input:focus{outline:0;background:#f5f5f5}
#subscribe-box2 .emailfield .submitbutton{background:#F4836A;box-shadow:0 4px 0 0 #cb5940;color:#fff!important;border:none;font-weight:500;outline:0;width:100%;cursor:pointer;transition:all .4s ease-in-out}
#subscribe-box2 .emailfield .submitbutton:active,#subscribe-box2 .emailfield .submitbutton:hover{background:#fb6f50!important}
#subscribe-box2 .subs-title{font-family:Roboto,sans-serif;font-weight:900!important;color:#333!important;font-size:24px!important}
#subscribe-box2 .subs-title2{font-family:Georgia,sans-serif;font-style:italic;font-weight:400!important}
#subscribe-box2 .form-button:before,#subscribe-box2 .form-email:before,#subscribe-box2 .form-name:before{font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:.5em;top:-2px}
#subscribe-box2 .form-button,#subscribe-box2 .form-email,#subscribe-box2 .form-name{position:relative!important}
#subscribe-box2 .form-name:before{content:'\f007';color:#777;font-size:16px;position:absolute;left:10px}
#subscribe-box2 .form-email:before{content:'\f0e0';color:#777;font-size:16px;position:absolute;left:10px}
#subscribe-box2 .form-button:before{content:'\f1d8';color:#fff;font-size:18px;position:absolute;left:50%;margin-left:-70px}
#subscribe-box2 input.submitbutton{background-color:#F4836A!important}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.close-shareOnscroll{position:absolute;top:-15px;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){.subscribe_box2{width:100%}
#subscribe-box2{border-radius:0;border-left:0}
}
/*]]>*/
</style>

Langkah Kedua

Selanjutnya, simpan kode berikut ini di atas kode </body>

<script>
//<![CDATA[
  var appended = false,
    bookmark =  document.createElement("div");
  bookmark.id = "subscribeOnscroll";
  bookmark.innerHTML = '<div class="subscribe_box2 slideInUp">\
<div id="subscribe-box2">\
  <p class="subs-title">SUBSCRIBE <span class="subs-title2">to Our Newsletter</span></p>\
                 <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>\
             <div class="emailfield">\
              <form action="//feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&apos;//feedburner.google.com/fb/a/mailverify?uri=Ngonline06&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true" target="popupwindow">\
               <span class="form-name">\
               <input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name"/></span>\
               <span class="clear"></span>\
               <span class="form-email">\
               <input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email"/></span>\
<input name="uri" type="hidden" value="Ngonline06"/>\
<input name="loc" type="hidden" value="en_US"/>\
                <span class="form-button">\
                <input class="submitbutton" type="submit" onclick="hidesubscribebox()" value="Subscribe Now!"/></span>\
              </form>\
             </div>\
</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"))};
function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",s.parentNode.insertBefore(o,s),setTimeout(function(){o.media=n||"all"})}loadCSS("https://cdn.rawgit.com/KompiAjaib/font-awesome-4.6.3/master/css/font-awesome.min.css");
//]]>
</script>

Keterangan.

• Silahkan ganti 'Ngonline06' yang berwarna merah dengan nama feedburner sahabat sendiri.
• Angka 7000 merupakan lamanya cookies dan angka 800 merupakan tinggi kemunculan kotak ketika discroll
• Adapun kode yang berwarna hijau adalah kode font awesome, sehingga ketika template sahabat sudah dilengkapi font tersebut, maka kode tersebut bisa dihilangkan.

Demikian Cara Memasang Widget Berlanggan (Subscribe) On Scroll dengan Cookies. Semoga bermanfaat dan bisa dipraktekkan dengan baik.