Blogger 'email ile abone ol' eklentisi

22 Aralık, 2016
Email ile abone ol eklentisi
Email ile abone ol eklentisi
Blogger (blogspot) bloglarınıza bu şahane "Email ile abone ol" eklentisini eklemek ister misiniz? Peki bu güzel email ile abone ol eklentisi Blogger bloglarına nasıl eklenir?

Feedburner sistemi ile blogunuzu takip eden ziyaretçilerinize bildiri gönderebilir ve blogunuza yeni eklediğiniz içerikleri okumaları için onları blogunuza davet edebilirsiniz. Bu yüzden email ile abone ol eklentisi blogumuzun trafiği için çok önemlidir. Ben de takip ettiğim önemli blogların yeni içeriklerinden haberdar olmak için email ile abone oluyorum. Her zaman blogları ziyaret etme şansım olmuyor ama gelen email ile kimin ne paylaştığını biliyorum az çok.

Blogger'ın hazır eklentileri arasında email ile takip et widgeti var ama görüntüsü açıkçası hoşuma gitmedi ve kendi bloguma da eklediğim bu widgeti sizlerle paylaşmak istedim. (Aşağıdaki resimde gösterdiğim hazır follow by email eklentisini Türkçeleştirmek isterseniz daha önce paylaştığım şu yazımı inceleyebilirsiniz.)
Follow by email eklentisi
Follow by email eklentisi
Öncelikle kendi blogumada eklediğim bu widgeti kullanabilmeniz için Feedburner'ın sitesine gidip ayarlarınızı yapmanızda fayda var. Özellikle Feedburner kullanıcı isminizi bilmeniz gerekir.
Feedburner ayarları
Feedburner ayarları
Eklentinin canlı görünümü için hemen blogumun sağ tarafını kontrol edebilirsiniz.(Tabi temayı değiştirdiğim için artık öyle bir eklenti yok. Ama yazının başında yer alan görseldeki gibi sonuç elde edeceksiniz.12.09.2018, güncelleme) Gördüğünüz gibi eklentide bir de sosyal medya sayfalarınız için bir alanda bulunuyor.

Şimdi blogumuza bu email ile abone olma eklentisini ekleyelim


1. Öncelikle Blogger kullanıcı panelinde sol tarafta yer alan "Şablon (Tema)" sekmesine tıklayın. Açılan sayfada "HTML düzenle" ye tıklayarak kodların yer aldığı sayfaya ulaşın. Kodlar arasında Ctrl F yardımıyla aşağıdaki kodu bulun.
<head>
2. Bulduğunuz bu kodun hemen altına aşağıdaki kodları ekleyin.
<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'/>
3. Daha sonra CSS kodları için Ctrl F yardımıyla aşağıdaki kodu bulun.
</style>
4. Bulduğunuz bu kodun hemen üstüne aşağıdaki kodu ekleyin.
#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,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:#e06666;-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:#29aae1}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}
Daha sonra temayı kaydederek işleme devam edebilirsiniz.

5. Son bir işlemimiz kaldı. Sol tarafta yer alan "Yerleşim" sekmesine tıklayın ve açılan yerleşim bölümünde email ile abone ol eklentisini eklemek için istediğiniz bir alanda "Gadget Ekle" butonuna tıklayın. Açılan gadget listesinde "HTML/Javascript" i seçin. Ve aşağıda yer alan kodları gadget olarak ekleyin.
<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-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Yeni yazılarımdan haberdar olun!</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=blogtecrubem' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogtecrubem, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogtecrubem'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email adresiniz...&quot;;}' onfocus='if (this.value == &quot;Email adresiniz...&quot;) {this.value = &quot;&quot;;}' value='Email adresiniz...'/>
<input class="subscribe-button" type="submit" value="ABONE OL!" />
</form>
</div>
Gadgeti kaydedin ve blogunuzu kontrol edin. Tüm yapılması gerkenler bunlardı. Ayrıca kırmızı renkle yazılan # 'nın yerine sosyal medya hesaplarınızın linkini, mavi renkle yazılan blogtecrubem'in yerine de kendi Feedburner kullanıcı adınızı yazmanız gerekiyor. Umarım eklenti hoşunuza gitmiştir.

10 yorum:

  1. Aslında E-mail eklentisi her blogda olması lazım. Çünkü bir çok kişi mailini sık sık kontrol edenler arasında. Güzel eklenti, paylaşım için teşekkürler...

    YanıtlaSil
  2. merhhaba blogumu yeni açtım bende beklerım :)

    YanıtlaSil
    Yanıtlar
    1. Tabi, hayırlı uğurlu olsun :) Başarılar dilerim...

      Sil
  3. Hocam eklenti gerçekten çok güzel elinize sağlık. Ancak ben renk değimi vs gibi şeyleri kendi bloguma göre uyarladım ama yatay genişliği ayarlayamadım. Nereden yapılıyor bir bilginiz var mı ?

    YanıtlaSil
    Yanıtlar
    1. Kodlar arasında width (genişlik), height (uzunluk) değerleri yer alır, bu değerleri düzenlemeniz gerekir.

      Sil
  4. merhabalar, benim sorum şu olacak. Bloguma ücretsiz olarak kendi tasarladıgım doğumgünü süsleri eklemek istiyorum, pdf formatında. ama bu .pdf leri, direkt olarak konu içinde paylaşmak yerine, siteme üye olma şartı koştuktan sonra, bunları kişilerin mail adresine yönlendirerek paylaşmak istiyorum. Nasıl yapılabilir? yurdagulozturk0657@gmail.com

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, e-posta ile abone olanları Feedburner'da takip eder ve dilediğiniz dosyayı mail atabilirsiniz onlara. E-posta ile abone olanların listesine ulaşmak için ise Feedburner'da Publicize ardından Email Subscriptions ve son olarak sayfanın en alt kısmında yer alan View Subscriber Details seçeneklerine tıklayarak ulaşabilirsiniz. Bu listede abone olanların mail adresleri ve ne zaman abone oldukları bilgisi yer alır. Bu bilgiler doğrultusunda e-posta gönderebilirsiniz.

      Sil
  5. Ben yaptim benzerini ama yeni yayın yukleyince abonelere mail gitmiyormuş ? Ne yapmam gerek yardımcı olur musunuz?

    YanıtlaSil
    Yanıtlar
    1. Feedburner hesabınızda gerekli düzenlemeleri yapabilirsiniz.

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın, aksi taktirde yorumunuz silinir.
3. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2016 - 2019 www.blogtecrubem.com · Duyuru · İletişim · Yasal Uyarı