Blogger Abone Ol Eklentisi Pop Up

YazarHamdiPhone

Blogger abone ol eklentisi ve blogger pop up abone ol eklentisini, sağ tarafta açılan blogger abone ol eklentisi kodları yardımıyla kolayca kurabilirsiniz.

 

Blogger Abone Ol Eklentisi Pop Up

 

Blogger sistemi hali hazırda takip sistemi sunmamasının yanında e-mail aboneliği yöntemiyle abonelerine yeni yazıları haber vermektedir. Blogger abone ol eklentisi sayesinde ziyaretçilerinizi 'abone olmaya' teşvik edebilirsiniz. 

 

Side bar alanında sabit duran ve mobil sayfanızda da görüntülenecek olan blogger abone ol eklentisi de kullanmak isteyebilirsiniz. Daha öncesinde, side bar alanında kullanılan 4 farklı blogger abone ol eklentisini paylaşmıştık. 

 

Yazımızda ise, pop up şeklinde açılan blogger abone ol eklentisinin kurulumunu ve blogger pop up abone ol eklenti kodlarını paylaşacağız. 

 

ÖNEMLİ: Aşağıdaki adımları uygulamadan önce HTML kodlarının bir kopyasını saklamayı ihmal etmeyiniz. Tüm temalar ile çalışmaktadır fakat yanlış yere kopyalama gibi sebeplerden dolayı sorun yaşayabilirsiniz.

 

 

Blogger Pop Up Abone Ol Ekletisi Nasıl Kurulur?

 

Blogger yönetim panelinize giriş yapı ve sol taraftaki menüden Tema'ya tıklayın. Açılan sayfada özelleştir alanının yanındaki açılır sekmeye tıklayın ve HTML Düzenle'ye giriş yapın.

 

CTRL+F ile </head> kodunu arıyor ve kodun bir satır üzerine altta yer alan blogger pop up abone ol eklentisi kodunu kopyalıyoruz.

 

 

<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>

 

 

 

Sonrasında aynı ekrandan CTRL+F yardımıyla </body> kodunu aratıyoruz ve bir üst satırına altta yer alan blogger pop up abone ol eklentisi kodlarını kopyalıyoruz.

 

 

<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="blogspotidnumarası"/>\
<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>

 

 

 

ÖNEMLİ: Kod içerisinde yer alan blogspotidnumarası yazan alana FeedBurner adresinizi yazmanız gerekmektedir. Örneğin, InternettenEkI gibi. FeedBurner adresinizi bilmiyorsanız öğrenmek için Abone Ol Eklentisi FeedBurner Adresi konusuna gözatabilirsiniz.


Sağ alt alanda yer alan kaydet butonuna basıyor ve eklentimizi kontrol ediyoruz. 


Web sitemizin sağ alt köşesinde pop up abone ol eklentisi görüntülenecektir. 

 

Eklentiyi kullanmaya başladığınızda kendinize ait mail adresiyle abone olarak test etmenizi de önermekteyim. 


Kategori

Yorum Gönder

Daha yeni Daha eski

İletişim