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 HTML2. Letakan kode dibawah ini diatas
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>3. Selanjutnya letakan kode dibawah ini diatas kode
<script src="https://cdn.rawgit.com/Brando07/share/newbe/SEOCIPS-obcdf.js"></script>
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'/>
#ccexitpop{font-family: 'Electrolize', sans-serif;display:none;position:fixed;top:0;left:0;width:100%;height:100%;}4. Letakan kode dibawah ini diatas kode
#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcLMb1v3PYFdrIX8a45B-5-Bx8fHpbJ34sHsBrIVoy0KFtoWluHWSHDpVNCIDOntwAcz5mqQstJKoc2y3_597djpsTptlDDD6jDMVoUEzYZNlUbGL8AUEVQtriuO2vZ38apaa-MCNdJhI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcLMb1v3PYFdrIX8a45B-5-Bx8fHpbJ34sHsBrIVoy0KFtoWluHWSHDpVNCIDOntwAcz5mqQstJKoc2y3_597djpsTptlDDD6jDMVoUEzYZNlUbGL8AUEVQtriuO2vZ38apaa-MCNdJhI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRX_oVfwB4zYwUjcFJM6w2-LMmIfCoR8G6XO8DzRi2bQ4cOES93LIELuDRYb4nshnUgn6JMAIknDcWwrwkoP3JuSeSX-NvafYvXfxvgg-dNCOV3m4S4I_JQgErcMubes5Hok5JyoGiOw4/s1600/mark.png')no-repeat left;background-size: 25px 25px}
<!-- Exit Popup Feedburner By Seocips -->5. Save tamplate dan lihat hasilnya.
<div id="ccexitpop">
<div class="overlay"></div>
<div class="popbox">
<div class="popbox-title">
<h2><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IDeB-SI8hVl3rlKzslQfHXDe6b-I5616x317QycNXgn-GRnYIxQlerfnB5sRUPERbc-8VEu3lSdJqgfU1zDz83CS2IFKxV4_i74sO3f8RHGXNty1uWVuDWnoAzqO0YbSTK-VNzBm8gE/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='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTyE3isP43BNYr3cDRw0HJ3ak_BaNccnrgQrsZWEhP3GeyPau54qW5J9YMfPdtSbod1G34PZJNyM7IZtVxstqVThnjggputEZll7bCOFDYU52mr5BM09MihF5jRMCOHfc9v9MMVqhZb7c/s1600/closebtn.png" /></a>
</div><!--close-->
<div class="popbox-credit">
<a href="http://www.blog.seocips.com/2015/09/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-->
Oh iya jangan lupa pada bagian ini di ganti atau di edit sesuai dengan Feedburnernya kamu.
http://feedburner.google.com/fb/a/mailverify?uri=seobersJika kamu masih tertarik dengan widget feedburner coba juga yang ini:
<input name='uri' type='hidden' value='seobers'/>
Nah sekian widget blog yang dapat dibagikan saat ini. Bagaimana mudah bukan? semoga bermanfaat. Terima kasih.
Post Comment