FeedBurner Subscribe Box Show Onscroll With Cookie

FeedBurner Subscribe Box Show Onscroll With Cookie

Bola Hero Gawai

FeedBurner Subscribe Box Show Onscroll With Cookie

FeedBurner Subscribe Box Show Onscroll With Cookie
Setelah kemarin kita membuat Mailchimp subscribe box show onscroll yang dilengkapi dengan cookie, kini giliran kita akan membuat FeedBurner subscribe box show onscroll seperti 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.



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(&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 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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

7 Comments Add Comment

langsung comot kang. makasih ini tutorialnya :)

Balas

Sama-sama bang :)

Balas

izin memasang mas, kebetulan di template kompi indy belum ada subscribe nya. :)

Balas

Maaf kang keluar topik :), gimana ya kang biar ini s1600?
https://3.bp.blogspot.com/-EAjHGmBrEMo/V8LAFapdCdI/AAAAAAAABLI/4rMgtpBdCmAuc3MxfJpMiGK7ZJn7jATdgCLcB/s1600/Untitled.png

Balas

Pakai kode ini
<b:if cond='data:blog.postImageUrl'>
<link expr:href='data:blog.postImageUrl' rel='image_src'/>
</b:if>

Balas

akarasa mulai dari template sampai widgetnya by kang adhy, nuhun kang untuk sadayana

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×