Cara Memasang Feedburner Subscribe Box Onscroll Effect Cookie
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Cari kode </head>
4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas 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> 5. Setelah itu Copy kode dibawah ini lalu Paste tepat diatas 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('http://feedburner.google.com/fb/a/mailverify?uri=Lk21News', '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="Lk21News"/>\ <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"))}; //]]> </script>Silahkan ganti lk21 News dengan username feedburner Anda6. Simpan atau Save Templatenya, dan lihat hasilnya.
Sekian dari tutorial ini, jikalau ada yang ingin Anda tanyakan atau mengalami persoalan silahkan komentar dibawah ini terima kasih.
