Dengan begitu subscribe box ini akan sering dilihat pengunjung blog yang kemungkinan tertarik untuk berlangganan update postingan terbaru dari blog kita. Sebelum pengunjung meng-klik tombol "Subscribe" maka kotak ini akan terus muncul.
Untuk menerapkannya di blog, silahkan ikuti langkahnya di bawah ini.
Silahkan simpan kode CSS di bawah ini 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>Kemudian silahkan simpan kode di bawah 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('//feedburner.google.com/fb/a/mailverify?uri=KompiAjaib', '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="KompiAjaib"/>\
<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 kode
KompiAjaib dengan username FeedBurner blog Anda. Angka 7000 untuk lamanya cookie dan 800 untuk tinggi kemunculan kotak ketika di-scroll.Untuk kode javascript yang saya block paling bawah adalah kode untuk Font Awesome, jika blog Anda sudah memiliki Font Awesome silahkan hapus kode tersebut.