Feedburner Subscribe Box Show Onscroll With Cookie

Setelah kemarin kita menciptakan Mailchimp subscribe box show onscroll yang dilengkapi dengan cookie, sekarang giliran kita akan menciptakan FeedBurner subscribe box show onscroll ibarat halnya Mailchimp subscribe box yang kemarin kita buat.

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.

Demo

Untuk menerapkannya di blog, silahkan ikuti langkahnya di bawah ini.

Silahkan simpan instruksi CSS di bawah ini di atas instruksi </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 instruksi di bawah ini di atas instruksi </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=KompiAjaib&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="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()">&#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>

Silahkan ganti instruksi KompiAjaib dengan username FeedBurner blog Anda. Angka 7000 untuk lamanya cookie dan 800 untuk tinggi kemunculan kotak saat di-scroll.

Untuk instruksi javascript yang aku block paling bawah ialah instruksi untuk Font Awesome, jikalau blog Anda sudah mempunyai Font Awesome silahkan hapus instruksi tersebut.

Sumber https://www.kompiajaib.com/

Share this post