Blogger Pop up Abone Ol Eklentisi

27.8.16

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()">&#215;</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
Faydalı mı?
Blogger
Disqus
Yorum Ekle

12 yorum

merhabalar,
sola almak için ne yapmak gerekiyor.

Cevap

pardon altını okumamıştım teşekkürler

Cevap

Anladım kolay gelsin. Yine bir problem olursa buradan yazabilirsiniz.

Cevap

Bloga ekledim ama mobil sayfada çalışıyor. Masaüstü görünümde çalışmıyor. Ne eksik olabilir..

Cevap

Mobili nasıl kapatırım

Cevap

Merhaba Ruhsadan İnciler, eklentinin mobil sayfalarda görünmesini istemiyorsanız, widget kodlarını bu <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>...</b:if> veri konumlandırma etiketleri arasına alın.

Cevap

yarın hallederiz

Cevap

Çok teşekkür ederim , amaç yaptığım çekilişi girenlerin görmesi direk..Facebook varsa kişisel ekliyim.

Cevap

Merhabalar hocam ,ben kendi sitemde bir çekiliş yapıyorum da , bu abone ol pop up tarzında ama abone ol değilde çekiliş sayfasını gösteren resim aynı şekilde nasıl yapabilirim ?

Site adresim : www.applehocam.com
Site blogger tabanlı.

Cevap

Tasarımın nasıl olduğunun pek önemi yok aslında , abone ol yerine çekiliş konusunun linki ve resmi çıkacak aynı boyutlarda .. Dikkat çekici olsun yeterli..Yardımcı olursanız çok sevinirim.

Cevap

yarın akşam saat 7 den sonra sonra size yardımcı olabilirim. isteğiniz basit bir işlem 15 - 20 dk yapılır

Cevap

yarın oldu hocam müsaitmisiniz ?

Cevap