 |
Blogger Abone Ol Eklentisi |
Blogger Abone Ol Eklentisi Nasıl Eklenir ?
- Blogger kumanda paneline geliyoruz.
- Hemen sol taraftan Şablon>HTML'yi Düzenle yerine tıklıyoruz.Açılan sayfada Ctrl + f yardımıyla </head> kodunu aratıyoruz.Aratıktan sonra kodumuzu </head> kodunun hemen üstüne ekliyoruz.
Kod:
<style type='text/css'>
/*<![CDATA[*/
.aboneol_kutu2{width:400px;margin:0;padding:0;position:fixed;right:0;bottom:0}
#aboneol-kutu2{width:100%;height:auto;background-color:#fefefe;margin:0;padding:10px 0;border:1px solid #ddd;border-right:0;border-bottom:0;border-radius:4px 0 0}
#aboneol-kutu2 p{font-size:16px;color:#666;font-weight:300;text-align:center;line-height:20px;padding:10px 20px 0;margin:0}
#aboneol-kutu2 .emailfield{padding:0 20px 10px}
#aboneol-kutu2 .emailfield input{color:#666;padding:10px 10px 10px 30px;margin-top:10px;font-size:15px;font-weight:300;width:100%;background:#f5f5f5;border:1px solid #ddd;border-radius:4px;}
#aboneol-kutu2 .emailfield input:focus{outline:0;background:#f5f5f5}
#aboneol-kutu2 .emailfield .submitbutton{box-shadow: 0 4px 0 #6f9a37;position: relative;color:#fff!important;border:none;font-weight:500;outline:0;width:100%;cursor:pointer;transition:all .4s ease-in-out}
#aboneol-kutu2 .subs-title{font-family:Roboto,sans-serif;font-weight:600!important;color:#323232!important;font-size:24px!important}
#aboneol-kutu2 .subs-title2{font-family:Georgia,sans-serif;font-style:italic;font-weight:400!important}
#aboneol-kutu2 .form-button:before,#aboneol-kutu2 .form-email:before,#aboneol-kutu2 .form-name:before{font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:.5em;top:-2px}
#aboneol-kutu2 .form-button,#aboneol-kutu2 .form-email,#aboneol-kutu2 .form-name{position:relative!important}
#aboneol-kutu2 .form-name:before{content:'\f007';color:#666;font-size:16px;position:absolute;left:10px}
#aboneol-kutu2 .form-email:before{content:'\f0e0';color:#666;font-size:16px;position:absolute;left:10px}
#aboneol-kutu2 .form-button:before{content:'\f1d8';color:#fefefe;font-size:18px;position:absolute;left:50%;margin-left:-70px}
#aboneol-kutu2 input.submitbutton{background-color:#82b440!important}
#aboneol-kutu2 .emailfield .submitbutton:active{top:2px;box-shadow:0 1px 0 #6f9a37}
#aboneol-kutu2 .emailfield .submitbutton:hover{background-color:#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 #ddd;border-radius:100%}
@media screen and (max-width:414px){.aboneol_kutu2{width:100%}
#aboneol-kutu2{border-radius:0;border-left:0}}
/*]]>*/
</style>
- 1. kodumuzu ekledikten sonra 2. kodumuzuda yine Ctrl + f yardımıyla </body> kodunu aratıyoruz.Buldukdan sonra kodumuzu </body> kodunun hemen üstüne ekliyoruz.
<script>
//<![CDATA[
var appended = false,
bookmark = document.createElement("div");
bookmark.id = "aboneolOnscroll";
bookmark.innerHTML = '<div class="aboneol_kutu2 slideInUp">\
<div id="aboneol-kutu2">\
<p class="subs-title">E-POSTA <span class="subs-title2">ile Abone Bülteni</span></p>\
<p>Blogumuzda yayınlanan yeni yayınların gelen kutunuza iletilmesi için, e-posta adresiniz ile buradan abone olun</p>\
<div class="emailfield">\
<form action="//feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('//feedburner.google.com/fb/a/mailverify?uri=blogspot/YRCZs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">\
<span class="form-name">\
<input name="name" onblur="if (this.value == "") {this.value = "adınız";}" onfocus="if (this.value == "adınız") {this.value = "";}" type="text" value="adınız"/></span>\
<span class="clear"></span>\
<span class="form-email">\
<input name="email" onblur="if (this.value == "") {this.value = "e-posta adresiniz";}" onfocus="if (this.value == "e-posta adresiniz") {this.value = "";}" type="text" value="e-posta adresiniz"/></span>\
<input name="uri" type="hidden" value="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()">×</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"))};
function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",s.parentNode.insertBefore(o,s),setTimeout(function(){o.media=n||"all"})}loadCSS("https://cdn.rawgit.com/jquerycods/awesome/master/font.css");
//]]>
</script>
- Sablonu kaydetip blog sitemize giriyoruz ve oldu.
- Kırmızı renkle gösterdiğim yere RSS ID kodunu kendi blogunuzdaki RSS ID kodunuzla değiştiriyoruz,
- Bu eklenti sizin sağ alt köşede olarak ayarlanmıştır isterseniz sol alt köşede gözükmesini istiyorsanız border-right: 0; kodunu border-left: 0; olarak değiştirin
-Olası bi hata olursa yorum yaparak bildiriniz-
-Blog Gözcüsü Blog İle İlgili Herşey-
Yorum Gönder