Blogger 2 Tane Abone Ol Eklentisi

Blog sitelerin olmazsa olmazı abone eklentisi bu eklenti blogunuzda witged olarak gözükücektir.Eklentinin sol üstünde sosyal butonların olmasıda kendine ait bir ayrıçalıktır.Diğer 2. abone ol eklentisinden de bahsedim,diğer ekletimizde adınız ve emailinizi istiyor bunda sosyal eklenti olmasada yine şık tasarımlıdır.Sadeliğiyle uğraştırmadan Email'nizi yazıp tek tuşla takip edebiliyoruz.Ben size kendim türkçeleştirip vericeğim.

Blogger 2 Tane Abone Ol Eklentisi Nasıl Eklenir ?

1:Abone Ol Eklentisi

Temanın demosu tam burada >Tıkla<
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 altına ekliyoruz.

Kod:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/><link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Üsteki kodu yapıştırdıktan sonra CSS kodumuzu aynı sayfada Ctrl + f yardımıyla </style> kodunu aratıyoruz.Aratıktan sonra kodumuzu </style> kodunun hemen üstüne ekliyoruz.

Kod:

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}.follow-subscribe-social ul li:last-child{margin:0}.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}.follow-subscribe-social ul li a:hover{color:#fff}form.subscribe{margin-top:-7px}form.subscribe input{display:block;width:100%}.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}.subscribe-email:focus{outline:0}form.subscribe .placeholder{color:#cacaca}form.subscribe input:-ms-input-placeholder{color:#cacaca}form.subscribe input::-webkit-input-placeholder{color:#cacaca}form.subscribe input:-moz-placeholder{color:#fafafa}form.subscribe input::-moz-placeholder{color:#fafafa}.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.subscribe-button:hover{background-color:#f1d640}.subscribe-button:focus{outline:0}.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Şablonu kaydet diyoruz.
Şimdide blogger kumanda paneline geliyoruz.Sol taraftan Yerleşim'e geliyoruz eklentiyi nerde gözükmesini istiyorsanız o kısma gelip Gadget Ekle'ye tıklıyoruz.
Geldikten sonra HTML/JavaScript Ekle'ye tıklayıp altaki kodumuzu yapıştırıyoruz.
Yayınlarlarımdan haberdar olmak için Lütfen Abone Ol kısmının rengini değiştirmek istiyorsanız Mavi renkle gösterdiğim yere istediğiniz renk kodunu yazınız.
Sosyal butonlarının rengini değiştirmek istiyorsanız Pembe renkle gösterdiğim yere istediğiniz renk kodunu yapıştırın.
Senin E-mail kısmının rengini değiştirmek istiyorsanız Turuncu renkle gösterdiğim yere istediğiniz renk kodunu yazınız.
Abone Ol butonun rengini değiştirmek için Mor renkle gösterdiğim yere istediğiniz renk kodunu yazınız.

Kod:

<center><div id="subscribebox"><div class="follow-subscribe-social"><ul><li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li></ul></div><p>Yayınlarlarımdan haberdar olmak için Lütfen Abone Ol</p><form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='uri' type='hidden' value='YOUR-USER-NAME'/><input name='loc' type='hidden' value='en_US'/><input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Senin E-mail'/><input class="subscribe-button" type="submit" value="Abone Ol" /></form>
</div></center><br/><br/><br/><div class="creadit"><a href="http://msdesignbd.com" target="_blank"> Get This Widget</a></div>

Kırmızı renkle gösterdiğim yere sosyal hesaplarınızın linklerini yapıştırın
Mavi renkle gösterdiğim yere isterseniz değiştirebilirsiniz kendinize göre.
Pembe renkle gösterdiğim yere kendi feedburner kullanıcı adını yazınız.
Reklam olmasını istemiyorsanız Yeşil renkle gösterdiğim yeri siliniz.

2:Abone Ol Eklentisi

Temanın demosu tam burada >Tıkla<
Blogger kumanda paneline geliyoruz.
Hemen sol taraftan Şablon>HTML'yi Düzenle yerine tıklıyoruz.Açılan sayfada Ctrl + f yardımıyla </style> kodunu aratıyoruz.Aratıktan sonra CSS kodumuzu </style> kodunun hemen üstüne ekliyoruz.

Not:İlk bastaki gibi bu

(<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Kod:

#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px

Şablonu kaydet diyoruz.
Şimdide blogger kumanda paneline geliyoruz.Sol taraftan Yerleşim'e geliyoruz eklentiyi nerde gözükmesini istiyorsanız o kısma gelip Gadget Ekle'ye tıklıyoruz.
Geldikten sonra HTML/JavaScript Ekle'ye tıklayıp altaki kodumuzu yapıştırıyoruz.

Kod:

<div id="subscribe-box"><center>Yayınlarlarımdan haberdar olmak için Lütfen Abone Ol</center><div class="emailfield"><form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Adınız" /><input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Senin E-mail" /><input name="uri" type="hidden" value="USER-NAME" /><input name="loc" type="hidden" value="en_US" /><input class="submitbutton" type="submit" value="Abone Ol" />
</form></div></div><div class="creadit"><a href="http://msdesignbd.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>