Blogger Pop up Abone Ol Eklentisi 2

Mailchimp tasarımlı Popup Abone Ol eklentisini dün sizlerle paylaşmıştık. Şimdi sizlere dün yapmış olduğumuz Mailchimp tasarımlı abone ol kutusunu biraz daha geliştirdik. Geliştirmiş olduğumuz bu eklenti FeedBurner gibi blogunuzun ziyaretçi tutmasını sağlayan blog abone ol eklentisini sizlerle paylaşıyorum.


Bu eklenti yeni nesil blog eklentilerinden esinlenerek tasarlanmış olup tüm blogcuların kolayca bloguna eklemek isteyecektir. Çünkü blogunuzun içeriklerini ve yeni blog yayınlarını sık sık takip eden ziyaretçilerinize son yayınlananlar hakkında e-posta yoluyla bildirim sunan bu eklenti ile blogunuzun abone sayısındaki artışları görebileceksiniz.

Blogger Pop up Abone Ol 2 Eklentisi Nasıl Eklenir?

Yeni nesil Popup Abone Ol eklentisini eklemek için aşağıdaki adımları takip edin. Aşağıdaki adımları uyguladıktan sonra açıklamaları da okuyarak eklenti hakkında tüm bilgileri sahip olabilirsiniz.

1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelini açın. Açılan sayfada Şablon > HTML'i Düzenle sekmesine tıklayarak şablon kodlarını açın. Şablon kodları arasında CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kod grubunu </head> kodunun bir satır üzerine ekleyin.

CSS

<style>
/*<![CDATA[*/
.subscription_box{width:400px;margin:0;padding:0;position:fixed;right:0;bottom:0}
#subscription-box{width:100%;height:auto;background:#fefefe;margin:0;padding:10px 0;border:1px solid #eee;border-right:0;border-bottom:0;border-radius:4px 0 0}
#subscription-box p{font-size:16px;color:#666;font-weight:400;text-align:center;line-height:20px;padding:10px 20px 0;margin:0}
#subscription-box .emailfield{padding:0 20px 10px}
#subscription-box .emailfield input{color:#666;padding:10px;margin-top:10px;font-size:16px;font-weight:400;width:100%;background:#f5f5f5;border:1px solid #eee;border-radius:2px;}
#subscription-box .emailfield input:focus{outline:0;background:#f5f5f5}
#subscription-box .emailfield .submitbutton{box-shadow:0 4px 0 #6f9a37;position: relative;color:#fff!important;border:none;font-weight:400;outline:0;width:100%;cursor:pointer;transition:all .4s ease-in-out}
#subscription-box .subs-title{font-family:Roboto,sans-serif;font-weight:600!important;color:#222!important;font-size:18px!important;text-transform: uppercase}
#subscription-box .form-button,#subscription-box .form-email,#subscription-box .form-name{position:relative!important}
#subscription-box input.submitbutton{background:#82b440!important}
#subscription-box .emailfield .submitbutton:active{top:2px;box-shadow:0 1px 0 #6f9a37}
#subscription-box .emailfield .submitbutton:hover{background:#74a632!important}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{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:10px;font-family:Arial;font-size:24px;font-weight:600;cursor:pointer;width:25px;color:#666;height:25px;line-height:25px;text-align:center;background:#fefefe;border:1px solid #eee;border-radius:100%}
@media screen and (max-width:414px){.subscription_box{width:100%}
#subscription-box{border-radius:0;border-left:0}}
/*]]>*/
</style>

2- Yine aşağıdaki javaScript kod grubunu eklemek için CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki javaScript kod grubunu </body> kodunun bir satır üzerine ekleyin.

JQuery

<script>
//<![CDATA[
  var appended = false,
    bookmark = document.createElement("div");
  bookmark.id = "aboneolOnscroll";
  bookmark.innerHTML = '<div class="subscription_box slideInUp">\
<div id="subscription-box">\
  <p class="subs-title">E-posta ile takip</p>\
                 <p>Yeni yayınlardan haberdar olmak için abone olun.</p>\
             <div class="emailfield">\
              <form action="//feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&apos;//feedburner.google.com/fb/a/mailverify?uri=blogspot/YRCZs&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true" target="popupwindow">\
               <span class="form-name">\
               <input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Adınız...&quot;;}" onfocus="if (this.value == &quot;Adınız...&quot;) {this.value = &quot;&quot;;}" type="text" value="Adınız..."/></span>\
               <span class="clear"></span>\
               <span class="form-email">\
               <input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-posta adresiniz...&quot;;}" onfocus="if (this.value == &quot;E-posta adresiniz...&quot;) {this.value = &quot;&quot;;}" type="text" value="E-posta adresiniz..."/></span>\
<input name="uri" type="hidden" value="blogspot/YRCZs"/>\
<input name="loc" type="hidden" value="tr_TR"/>\
                <span class="form-button">\
                <input class="submitbutton" type="submit" onclick="hideaboneolbox()" value="Göndermek için tıkla!"/></span>\
              </form>\
             </div>\
</div>\
<div class="close-shareOnscroll" onclick="hideaboneol()">&#215;</div>\
              </div>\
';
function hideaboneol(){document.getElementById("aboneolOnscroll").style.display="none"}function hideaboneolbox(){document.getElementById("aboneolOnscroll").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("aboneolOnscroll").style.display="none"))};
//]]>
</script>

3- Şablonu kaydedin ve eklentinin çalıştığını görmek için blogunuzu kontrol edin.

Açıklamalar

Bir kaç ipucu daha paylaşarak Popup Abone Ol eklentisini blogunuza uygun olarak çalışmasını sağlayabilirsiniz.

1- Yukarıdaki javaScript kodu içerisinde bulunan blogspot/YRCZs RSS ID kodunu kendi blogunuzun RSS ID kodu ile değiştirin.

2- Bu eklenti blogunuzun sağ alt köşesinde görünmesi için tasarlanmıştır. Eğer siz blogunuzun sol alt köşesinde çalışmasını istiyorsanız, aşağıdaki adımları takip edin;

• Yukarıdaki CSS kodu içerisinde bulunan border-right: 0; kodu yerine border-left: 0; kodunu ekleyin.
• Yukarıdaki CSS kodu içerisinde bulunan right: 0; kodu yerine left: 0; kodunu ekleyin.
• Yukarıdaki CSS kodu içerisinde bulunan border-radius: 4px 0 0; kodu yerine border-radius: 0 4px 0; kodunu ekleyin.

Yapılan bu değişiklikler ile Popup Abone Ol 2 eklentisi sorunsuz olarak blogunuzun sol alt köşesinde çalışacaktır. Bu yazımızı sosyal ağ sayfalarınızda paylaşarak blogumuza katkıda bulunabilirsiniz.

Ön İzleme

Etiketler: Blogger Popup Abone Ol Kutusu 2 / Blogger RSS Eklentileri / Blogspot FeedBurner Kutusu / Blog Açılır RSS Eklentisi / Blogger Abone Besleme Eklentileri