Membuat Kotak Feedburner Efek Popup di Blogger. Ini adalah postingan yang kesekian kali ketika saya membahas tentang widget feedburner. Nah untuk itu bagi kamu yang belum tahu kegunaan widget ini bisa baca disini.

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 Dengan Tombol Close
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 </head>
<script src="http://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='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'/>
3. Selanjutnya letakan kode dibawah ini diatas kode ]]></b:skin>. Kalau tidak ada letakan saja di atas kode </style> ( jika ada lebih dari satu kode  </style>, pastikan di tempat yang paling sesuai ).
#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('http://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('http://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('http://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 </body>.
<!-- Exit Popup Feedburner By Seocips -->
<div id="ccexitpop">
<div class="overlay"></div>
<div class="popbox">
<div class="popbox-title">
<h2><img src="http://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='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=seocips" , "popupwindow", &quot;scrollbars=yes,width=550,height=520&quot;);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 == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' 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="http://1.bp.blogspot.com/-Z4dnC3jtpfI/VKbZca4hJlI/AAAAAAAAJ6o/3BNoYB4Apz0/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-->
5. Save tamplate dan lihat hasilnya.


Oh iya jangan lupa pada bagian ini di ganti atau di edit sesuai dengan Feedburnernya kamu.
http://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.
0 Komentar untuk "Kotak Feedburner Efek Popup Dengan Tombol Close Untuk Blogger"