Memasang widget berlanggan sangat penting terlebih jika blog sahabat memang sangat menarik dan butuh sebuah langganan dari pengunjung. Sebenarnya, Admin 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 sesuai langkah-langkahnya.
Selanjutnya, kelebihan lainnya adalah dengan Cookies. Maksudnya, keberadaan widget ini akan selalu muncul selama tombol 'Subscribe' belum diklik.
OK, langsung saja, kami kira sahabat sudah tidak sabar lagi untuk mengetahui cara menerapkan widget yang spesial ini. Tutorial ini merupakan milik kang Adhy Suryadi.
Tutorial Cara Memasang widget berlangganan onscroll dengan cookies
Langkah PertamaLetakkan 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>Keterangan.
//<![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('//feedburner.google.com/fb/a/mailverify?uri=bloilmupendidikan', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">\
<span class="form-name">\
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name"/></span>\
<span class="clear"></span>\
<span class="form-email">\
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email"/></span>\
<input name="uri" type="hidden" value="bloilmupendidikan"/>\
<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()">×</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>
- Silahkan ganti bloilmupendidikan 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.
Share this
Muhammad Ihsan: Kang Santri Paud berasal dari Boyolali, tinggal di Kedunggobyak, Sobokerto, Ngemplak Boyolali Jateng. Saya baru belajar mendesain blog sekaligus menjadi admin blog ini.