Blogger için "email ile abone ol" eklentisi

Blogger için "email ile abone ol" eklentisi
Blogger (blogspot) için bu şahane "Email ile abone ol" eklentisini eklemek ister misiniz? Peki email ile abone ol eklentisi Blogger'a nasıl eklenir? Email ile abone ol widgeti...

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 olma eklentisi blogumuz 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.

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 widgeti Türkçeleştirmek için bu linke ulaşın!)
Blogger için "email ile abone ol" eklentisi
Blogger'da olan "Follow by email" gadgeti
Ö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.
Blogger için "email ile abone ol" eklentisi
Eklentinin canlı görünümü için hemen blogumun sağ tarafını kontrol edebilirsiniz. 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" 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 kodu 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 buluyoruz.
</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;}
Şablonu kaydedin.

5. Son bir işlemimiz kaldı. Sol tarafta yer alan "Yerleşim" sekmesine tıklıyoruz ve açılan yerleşim bölümünde email ile abone ol eklentisini eklemek için istediğimiz bir alanda "Gadget Ekle" butonuna tıklıyoruz. Açılan gadget listesinde "HTML/Javascript" i seçiyoruz. Ve aşağıda yer alan kodları gadget olarak ekliyoruz.
<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.

✋Bu içerik BlogTecrübem tarafından hazırlanmıştır.

2 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

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.