Blogger Pop up Abone Ol Eklentisi

8/27/2016
Blogger Pop up Abone Bülteni

Blogger Pop up Abone Ol Eklentisi - 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 Popup 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.
<style type='text/css'>
/*<![CDATA[*/
#site-subs{display:block;padding:15px;background:#fefefe;border:1px solid #ddd;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_embed_kaydol{font-size:15px;clear:left;font-family: Roboto,sans-serif;-webkit-font-smoothing: antialiased;width:100%}
#mac_embed_kaydol .button,#mac_embed_kaydol input.email{box-sizing:border-box;height:41px;line-height:41px;width:100%}
#mac_embed_kaydol form{text-align:left;padding:0}
.mac-field-group{display:inline-block}
#mac_embed_kaydol input.email{font-family: Roboto,sans-serif;font-size:.9em;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#343434;background-color:#fff;padding:0 .8em;display:inline-block;margin-bottom:10px;vertical-align:top}
#mac_embed_kaydol .button:active,#mac_embed_kaydol .button:focus,#mac_embed_kaydol input.email:active,#mac_embed_kaydol input.email:focus{outline:0}
#mac_embed_kaydol label{font-family: Roboto,sans-serif;display:block;font-size:19px;padding-bottom:10px;font-weight:600;color:#666}
#mac_embed_kaydol .our,#mac_embed_kaydol .to{font-weight:400;font-size:21px}
#mac_embed_kaydol .get{font-weight:400;font-size:15px}
#mac_embed_kaydol .clear{display:block;width:100%}
#mac_embed_kaydol .ile{font-weight:400;font-size:18px;font-style:italic}
#mac_embed_kaydol .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:#fefefe;background-color:#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_embed_kaydol .button:hover{box-shadow: 0 2px 0 #6f9a37;position: relative;background-color:#82b440;cursor:pointer}
#mac_embed_kaydol div#mac-responses{float:left;top:-1.4em;padding:0 .5em;overflow:hidden;width:90%;margin:0 5%;clear:both}
#mac_embed_kaydol div.response{margin:1em 0;padding:1em .5em .5em 0;font-weight:600;float:left;top:-1.5em;z-index:1;width:80%}
#mac_embed_kaydol #mac-error-response{display:none}
#mac_embed_kaydol #mac-success-response{color:#529214;display:none}
#mac_embed_kaydol 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:-20px;right:10px;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 #ddd;border-radius:100%}
@media screen and (max-width:414px){#site-subs{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.
<script>
//<![CDATA[
  var appended = false,
  bookmark = document.createElement("div");
  bookmark.id = "epostaabone";
  bookmark.innerHTML = '<div id="site-subs" class="slideUpbox">\
  <div id="mac_embed_kaydol">\
    <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_embed_kaydol_scroll">\
        <label for="mac-email">E-POSTA <span class="ile">ile</span> <span class="our">Abone Bülteni</span><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 adresinizi yazın" 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öndermek için tıklayın" 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("epostaabone").style.display="none"}function hidesubscribebox(){document.getElementById("epostaabone").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("epostaabone").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.

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

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

4 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