Kotak Feedburner Efek Popup Dengan Tombol Close Untuk Blogger
Ditulis oleh: Ditulis pada: April 15, 2022
Widget feedburner berikut ini berbeda dengan widget fedburner dengan efek popup yang telah dibagikan sebelumnya, pada widget biasa, biasanya akan langsung muncul ketika/bersamaan dengan dimuatnya satu halaman pada blog. Widget ini berbeda karena akan muncul ketika pengguna sedang membaca artikel pada halaman anda.
 |
| Kotak Feedburner Efek Popup |
Tentusaja untuk membuat widget feedburner ini blog kamu sudah terdaftar pada feedburner.google.com , untuk anda yang belum terdaftar coba baca: cara daftar blog ke rss feedburner. Jika sudah berikut adalah cara membuatnya.
Membuat Kotak Berlangganan Feedburner Efek Popup di Blogger
1. Pertama pada Blog Blogger anda pilih menu Template => Edit HTML
2. Letakan kode dibawah ini diatas
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<script src=”https://cdn.rawgit.com/Brando07/share/newbe/SEOCIPS-obcdf.js”></script>
<link href=’https://fonts.googleapis.com/css?family=Electrolize’ rel=’stylesheet’ type=’text/css’/>
3. Selanjutnya letakan kode dibawah ini diatas kode
#ccexitpop{font-family: ‘Electrolize’, sans-serif;display:none;position:fixed;top:0;left:0;width:100%;height:100%;}
#ccexitpop .overlay{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.7;z-index:99998;}
#ccexitpop .popbox{font-family: ‘Electrolize’, sans-serif;z-index:99999;border-bottom:5px solid#0072c3;color:#333;width:580px;height:210px;background:#fafafa;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;}
#ccexitpop .popbox-title{font-family: ‘Electrolize’, sans-serif;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);color:#fff;padding:10px;margin:0;border-radius:4px 4px 0 0;text-align:center}
#ccexitpop h2{font-family: ‘Electrolize’, sans-serif;color:#fff;font-size:18px;margin:5px;text-transform:uppercase;font-weight:bold;}
#ccexitpop .popbox-body{padding:20px;padding-bottom:10px;font-size:12px;}
#ccexitpop .popbox-close{position:relative;text-align:center;width:30px;float:right;}
.cc-subs{width:320px;float:left}
.popbox-credit{float:right;width:50px;height:45px;line-height:45px;}
.popbox-credit a{text-decoration:none; font-size:9px; color:#ccc; margin: 10px;}
.popbox-title img{width:30px;position:relative;top:5px;right:4px;border:0;}
#thebutton {margin-top:5px;font-family: ‘Electrolize’, sans-serif;width: 300px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%); background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #2dabf9;display:inline-block;cursor:pointer;color:#ffffff;font-size:15px;padding:9px 23px;text-decoration:none;}
#thebutton:hover {background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9)); background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%); background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%); background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);}
#thebox {background: url(‘https://2.bp.blogspot.com/-T0Z08pY3a9I/VKboenoqJiI/AAAAAAAAJ70/IigCUR86B0E/s1600/email.png’)no-repeat right center; background-size:25px 25px;width:242px;font-family: ‘Electrolize’, sans-serif;-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out;outline: none;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:9px 28px;margin: 5px 1px 3px 0px;border: 1px solid #DDDDDD;}
#thebox:focus {background: url(‘https://2.bp.blogspot.com/-T0Z08pY3a9I/VKboenoqJiI/AAAAAAAAJ70/IigCUR86B0E/s1600/email.png’)no-repeat left center; background-size:25px 25px;box-shadow: 0 0 5px rgba(81, 203, 238, 1);-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);-o-box-shadow: 0 0 5px rgba(81, 203, 238, 1); border: 1px solid rgba(81, 203, 238, 1);}
#text-right{float:right;}
#text-right h2{font-family: ‘Electrolize’, sans-serif;padding-left:30px;padding-top:3px;font-size:16px; color:#333; margin:5px;background: url(‘https://3.bp.blogspot.com/-6mEoOHymGzg/VKbiANhZ-WI/AAAAAAAAJ7I/VzfkHyzvKZI/s1600/mark.png’)no-repeat left;background-size: 25px 25px}
4. Letakan kode dibawah ini diatas kode
<!– Exit Popup Feedburner By Anisuka –>
<div id=”ccexitpop”>
<div class=”overlay”></div>
<div class=”popbox”>
<div class=”popbox-title”>
<h2><img src=”https://3.bp.blogspot.com/-RA-cSMlCLvg/VKbl_plxCJI/AAAAAAAAJ7g/c_hY1ynJt8k/s1600/feedburner-icon.png” />Subscribe Before Leaving</h2>
</div><!–Title–>
<div class=”popbox-body”>
<div class=”cc-subs”>
<!–//The Subscribtion Box
Make sure you edit it before saving//–>
<form action=’https://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open("https://feedburner.google.com/fb/a/mailverify?uri=seocips” , “popupwindow”, "scrollbars=yes,width=550,height=520");return true’ target=’popupwindow’>
<input name=’uri’ type=’hidden’ value=’seocips’/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
<input class=’emailinput’ id=’thebox’ name=’email’ onblur=’if (this.value == "") {this.value = "Enter your email";}’ onfocus=’if (this.value == "Enter your email") {this.value = ""}’ type=’text’ value=’Enter your email’/>
<input id=’thebutton’ type=’submit’ value=’Subscribe Now’/>
</form>
</div><!–Subscribe–>
<div id=”text-right”>
<h2>100% Free</h2>
<h2>Regular Updates</h2>
<h2>No Spamming</h2>
</div><!–Text right–>
</div><!–Body–>
<div class=”popbox-close”>
<a href=”#”><img src=”https://1.bp.blogspot.com/-Z4dnC3jtpfI/VKbZca4hJlI/AAAAAAAAJ6o/3BNoYB4Apz0/s1600/closebtn.png” /></a>
</div><!–close–>
<div class=”popbox-credit”>
<a href=”https://www.blog.anisuka.com/2022/04/feedburner-subscription-form-popup.html” target=”_blank”>Install</a>
</div><!–Credit–>
</div><!–Popbox–>
</div><!–ccexitpop–>
<script>
var _ouibounce = ouibounce(document.getElementById(‘ccexitpop’), {
aggressive: true,
timer: 0,
callback: function() { console.log(‘ouibounce fired!’); }
});
$(‘body’).on(‘click’, function() {
$(‘#ccexitpop’).hide();
});
$(‘#ccexitpop .popbox-close’).on(‘click’, function() {
$(‘#ccexitpop’).hide();
});
$(‘#ccexitpop .popbox’).on(‘click’, function(e) {
e.stopPropagation();
});
</script>
<!–End Of All–>
5. Save tamplate dan lihat hasilnya.
Oh iya jangan lupa pada bagian ini di ganti atau di edit sesuai dengan Feedburnernya kamu.
https://feedburner.google.com/fb/a/mailverify?uri=seocips
<input name=’uri’ type=’hidden’ value=’seocips‘/>
Jika kamu masih tertarik dengan widget feedburner coba juga yang ini:
Nah sekian widget blog yang dapat dibagikan saat ini. Bagaimana mudah bukan? semoga bermanfaat. Terima kasih.
