Baca juga :
- Cara Mendaftarkan Blog Ke FeedBurner Untuk Berlangganan Email
- Cara Membuat Widget FeedBurner Berlangganan Artikel Keren Di Blog
Sekarang saya ingin berbagi tutorial membuat FeedBurner Subscribe Box Melayang dan Responsive di blog, dan juga ini menggunakan Cooki, maksudnya saat pengunjung blog kita menekan tombol subscribe atau tombol close maka widget ini tidak akan muncul lagi pada pengunjung yang sama, akan muncul lagi saat pengunjung tadi menghapus cookinya atau settingan waktu cooki di widgetnya sudah habis. Contohnya bisa sobat lihat sendiri di blog ini, bagaimana, tertarik membuatnya ? langsung saja disimak cara membuatnya.
Membuat FeedBurner Subscribe Box Melayang Responsive Di Blog Dengan Cooki
Sebelumnya silahkan sobat menuju ke Blogger > Template > Edit HTMLLalu letakkan kode CSS di bawah ini tepat 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 letakkan kode Javascript di bawah ini tepat 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=Musafus', '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="Musafus"/>\
<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>
- Ganti Musafus dengan ID FeedBurner sobat
- Angka 7000 untuk lamanya cooki dan 800 untuk tinggi kemunculan widgetnya saat di scroll
- Hapus yang saya block warna merah paling bawah jika di blog sobat sudah terpasang Font Awesome
Langkah terakhir klik Simpan Template
Sekian artikel kali ini tentang Membuat FeedBurner Subscribe Box Keren Responsive Melayang Di Blog, semoga berhasil mempraktekkannya.
sumber kode: www.kompiajaib.com/2016/08/feedburner-subscribe-box-show-onscroll.html