Membuat Subscribe Efek Popup Keren di Blogger

Membuat Subscribe Efek Popup Keren di Blogger

Edit


Oleh Seobers Net: Repost and Edited By Channel Downloads

Widget feedburner dengan efek Pop Up; Berbeda dengan widget fedburner dengan efek popup biasa yang langsung muncul bersamaan dengan dimuatnya atau ketika kita masuk ke home page satu halaman pada blog. Widget ini berbeda karena akan muncul ketika pengguna beralih dari sebuah halaman ke halaman lainnya di website anda. Tentu saja 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Zn87Ih7Y0qiQukbap0CcW3fDRTjPR2JS-k23xMutmORozkn23rBxpWaOGuLVv7rePtZEHPH10W1OIy4lXoXNyi6IfYkuXE47wQ6MEYDyx_Z3jslGFKjbE1EPe2p_2KuI7eMBJg9smj0/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/AVvXsEg0Zn87Ih7Y0qiQukbap0CcW3fDRTjPR2JS-k23xMutmORozkn23rBxpWaOGuLVv7rePtZEHPH10W1OIy4lXoXNyi6IfYkuXE47wQ6MEYDyx_Z3jslGFKjbE1EPe2p_2KuI7eMBJg9smj0/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/AVvXsEil99BSxgTk5gNv3MlLZfVAUA7IVqtVD_x8EfM52w7i14CmG5mbLd85F1KgVtRBt3sONF0OJKlPhGGKAk9SKrfXZak9bhHTS-PO35RNn1oB2eDQEtcNvFQd1aS7klZLVuPjBRiUsR93d7o/s1600/mark.png')no-repeat left;background-size: 25px 25px}
4. Letakan kode dibawah ini diatas kode </body>
<!-- Exit Popup Feedburner By Channel Downloads -->
<div id="ccexitpop">
<div class="overlay"></div>
<div class="popbox">
<div class="popbox-title">
<h2><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBMk2lVtVUa4GvEdcevSzWkDApvNbFcnosA4aMGSwToKT-DP7h_c7aGjGlgZqSQrvq9N4BXVt_ig6RMv9hpXsHY3al4NSo_y-ULC9yXuyi1Jfeq_KaNcpRAbRprU0qOdzf8AxWXNwhqdY/s1600/feedburner-icon.png" />Mohon Subscribe Channel Downloads Ye Bro</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=ChannelDownloads" , "popupwindow", &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ChannelDownloads'/>
<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>Apps 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/AVvXsEhHlQB6dnPG97WrJJCtjfZyQ9-z1RJ0S5lC5XkdPKQCyvZlE3NtF99pO6uDJLkRg_nxFCz4g43QzrGSj0635kpwa1Bcr_BtVX_tGrSjEkEp-Bl_w_BO46vI3gf7vcPGLvFrpBRzjtlhupA/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.


Terakhir, Jangan lupa pada bagian yang berwana MERAH di ganti atau di edit sesuai dengan Feedburner kamu.
http://feedburner.google.com/fb/a/mailverify?uri=ChannelDownloads
<input name='uri' type='hidden' value='ChannelDownloads'/>
Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

2 komentar:

Langganan: Posting Komentar ( Atom )