Blog yayınlarınızı takip eden ziyaretçilerin yeni blog yayınlarınızı daha iyi takip etmeleri için blogunuza bir e-posta abonelik kutusu eklemelisiniz. Abonelik kutusu sayesinde ziyaretçileriniz son yayınlanan blog içeriklerini veya planlanmış blog yayınlarını ve önemli blog yayınları güncellemelerini eposta yoluyla ziyaretçilerinize bildirebilirsiniz.
Popup Abone Ol Kutusu blog sayfalarınzın aşağı kaydırılması ile görünen ve kapatma butonu ile tasarlanmış eklentiyi blogunuza kurabilmeniz için bilgileri sinizle paylaşacağım. Blog ziyaretçileriniz e-posta adreslerini yazıp gönder butonuna tıkladığında abone üyeliği aktif olacaktır. Kolay kullanımı ve şık tasarımı ile blogunuzun görünümüne katkıda bulunacaktır.
Blogger Pop-up Abone Ol Bülteni Nasıl Eklenir?
Blogger Pop up Abone Ol Eklentisini eklemek için aşağıdaki adımları takip edin;
1- Popup abone ol eklentisini eklemek için blogger hesabınıza giriş yaparak blogunuzun kuman panelini açın. Açılan sayfada bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodlarını açın. CTRL+F yardımıyla </head> kodunu buluna ve aşağıdaki CSS kod grubunu </head> kodunun bir satır üzerine ekleyin.
CSS
<style>
/*<![CDATA[*/
#blog_subscription{display:block;padding:15px;background:#fefefe;border:1px solid #eee;border-right:0;border-bottom:0;border-radius:4px 0 0;position:fixed;bottom:0;right:0;-webkit-box-shadow: 0px 9px 40px 0px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 9px 40px 0px rgba(0, 0, 0, 0.1);box-shadow: 0px 9px 40px 0px rgba(0, 0, 0, 0.1);z-index:1000000}
#mac_subscription{font-size:15px;clear:left;font-family: Roboto,sans-serif;-webkit-font-smoothing: antialiased;width:100%}
#mac_subscription .button,#mac_subscription input.email{box-sizing:border-box;height:41px;line-height:41px;width:100%}
#mac_subscription form{text-align:left;padding:0}
.mac-field-group{display:inline-block}
#mac_subscription input.email{font-family: Roboto,sans-serif;font-size:.9em;border:1px solid #eee;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#333;background:#fff;padding:0 .8em;display:inline-block;margin-bottom:10px;vertical-align:top}
#mac_subscription .button:active,#mac_subscription .button:focus,#mac_subscription input.email:active,#mac_subscription input.email:focus{outline:0}
#mac_subscription label{font-family:Roboto,sans-serif;display:block;font-weight:600!important;color:#222!important;font-size:18px!important;text-transform:uppercase;padding:0 0 8px 0;text-align:center}
#mac_subscription .get{font-weight:400;font-size:14px;text-transform:none!important}
#mac_subscription .clear{display:block;width:100%}
#mac_subscription .button{font-family: Roboto,sans-serif;font-size: 13px;-webkit-font-smoothing: antialiased;font-weight:600;border:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:3px;letter-spacing:.03em;color:#ffff;background:#323232;box-shadow: 0 2px 0 #666;position: relative;padding:0 18px;display:inline-block;margin:0;transition:all .23s ease-in-out 0s}
#mac_subscription .button:hover{background:#424242;box-shadow: 0 2px 0 #777;position: relative;cursor:pointer}
#mac_subscription div#mac-responses{float:left;top:-1.4em;padding:0 .5em;overflow:hidden;width:90%;margin:0 5%;clear:both}
#mac_subscription div.response{margin:1em 0;padding:1em .5em .5em 0;font-weight:600;float:left;top:-1.5em;z-index:1;width:80%}
#mac_subscription #mac-error-response{display:none}
#mac_subscription #mac-success-response{color:#666;display:none}
#mac_subscription label.error{display:block;float:none;width:auto;margin-left:1.05em;text-align:left;padding:.5em 0}
.slideUpbox{-webkit-animation-name:slideUpbox;animation-name:slideUpbox;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideUpbox{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideUpbox{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:16px;font-size:22px;font-weight:700;cursor:pointer;width:25px;color:#323232;height:25px;line-height:23px;text-align:center;background:#fefefe;border:1px solid #eee;border-radius:100%}
@media screen and (max-width:414px){#blog_subscription{width:100%;border-radius:0;border-left:0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}}
/*]]>*/
</style>2- Yine CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
JQuery
<script>
//<![CDATA[
var appended = false,
bookmark = document.createElement("div");
bookmark.id = "subscriptions";
bookmark.innerHTML = '<div id="blog_subscription" class="slideUpbox">\
<div id="mac_subscription">\
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" id="mac-embedded-subscribe-form" name="mac-embedded-subscribe-form" class="validate" target="_blank" novalidate>\
<div id="mac_subscription_scroll">\
<label for="mac-email">E-posta ile takip<br/>\
<span class="get">Tüm yeni yayınlar e-posta adresinize gelsin.</span></label>\
<input type="email" value="" name="email" class="email" id="mac-email" placeholder="E-posta adresiniz..." required>\
<div style="position: absolute; left: -5000px;" aria-hidden="true">\
<input type="text" name="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/YRCZs" tabindex="-1" value="">\
</div>\
<div class="clear"></div>\
<input type="submit" value="Gönder" onclick="hidesubscribebox()" name="subscribe" id="mac-embedded-subscribe" class="button">\
</div>\
</form>\
</div>\
<div class="close-shareOnscroll" onclick="hidesubscribe()">×</div>\
</div>\
';
function hidesubscribe(){document.getElementById("subscriptions").style.display="none"}function hidesubscribebox(){document.getElementById("subscriptions").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("subscriptions").style.display="none"))};
//]]>
</script>3- Şablonu kaydederek blogunuzu kontrol edin.
Açıklamalar;
Blogunuza eklemiş olduğunuz Popup Abone Ol eklensini blogunuza daha uygun hale getirmek için bir kaç ipucu daha sizlerle paylaşıyorum.
1- Yukarıdaki javaScript kodu içerisinde belirtilen Feedburner ID'si yerine kendi blogunuzun Feedburner ID'sini ekleyin. Feedburner ID blogspot/YRCZs.
2- Popup Abone Ol eklentisi blogunuzun sağ alt köşesine göre ayarlandı. Eğer siz blogunuzun sol alt köşesinde görünmesini istiyorsanız yokrıdaki CSS kod grubu içerisinde belirtilen kodları aşağıdaki gibi değiştirin;
- CSS kodu içerisinde bulunan bu right:0 kod yerine bu left: 0; kodunu ekleyin.
- CSS kodu içerisinde bulunan bu border-radius:4px 0 0 kod yerine bu border-radius: 0 4px 0; kodunu ekleyin.
- CSS kodu içerisinde bulunan bu border-right:0; kod yerine bu border-left: 0; kodunu ekleyin.
Bknz: Blogger Pop up Abone Ol Eklentisi 2
Bu değişiklikleri yaptığınızda Popup Abone Ol eklentisi blogunuzun sol alt köşesinde görünür olacaktır. Blogumuza katkıda bulunmak için bu yayınımızı sosyal ağ sayfalarınızda arkadaşlarınız ile paylaşın ve sayfamızın en altında bulunan abone bülteninden blogumuza abone olarak yeni yayınlar hakkında e-posta yoluyla bildirim alabilirsiniz. Bu yazımız hakkında daha fazla bilgi için aşağıdaki yorum sisteminden bize ulaşabilirsiniz.
Etiketler: Blogger Popup Abone Ol Kutusu / Blogger Abone Ol Eklentileri / Blogspot Abone Ol Kutusu / Blog Açılır Abone Ol Eklentisi / Blogger 2017 Eklentileri
Yorum Gönder