Blog Yazı İçerisine E-posta Abonelik Formu Nasıl Eklenir?


Bloğunuz da yazdığınız yazılarınızın hızlı bir şekilde okuyucu kitleye ulaşması zaman alır. Hem Google' ın indexlemesi hem de aynı yazının arama sonuçlarında çokça geçmesi buna nedendir. Fakat e-posta abonelerini bu sınıfa dahil edemeyiz. Belirli miktar e-posta abone sayısına ulaşan blog siteleri yazılarını okuyucu kitleye hızlı servis edebilmektedir. Bu sayede yazılan her yazı arama motorlarından önce bloğun kendi takipçileri tarafından ziyaret edilmektedir.

Daha önce feedburner ile abonelik sistemini anlatmıştık. Feedburner ayarlarında da buradaki yazıda bahsetmiştik. Bu yazımızda ise bloğumuzda ki yazılar içerisine abonelik formunu nasıl ekleyeceğimizden bahsedeceğiz.

İlk Adım: Şablon Düzenleyici

Blogger Yönetim Panelinde Şablon > Html Düzenleyi açın. CTRL+F İle arama yaparak "<div class='post-footer'>" ı bulun.

Aramanızda iki adet sonuçla karşılaşacaksınız. Biri mobil sürüm için olan footer diğeri masaüstü için. Dilerseniz ikisine de ekleyebilirsiniz. Eğer masaüstü için eklemek isterseniz ikinci arama sonucunun hemen üstüne aşağıdaki kodu ekleyemeniz yeterli.
Resimdeki satır numarası da bulmanıza yardımcı olsun.

İkinci Adım: Abonelik Formu Kodu

Aşağıdaki kodu aynen yapıştırabilirsiniz. Üzerinde yapmanız gereken tek değişiklik. Kırmızı ve koyu renkle yazmış olduğum "ozkiremitci" yani bana ait olan feedburner hesabı yerine kendi hesabınızı yazacaksınız.

<style>
 #feedburnerSub { 
  background: url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;
  font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
  -moz-box-shadow: 0 5px 5px -5px #999;
  -webkit-box-shadow: 0 5px 5px -5px #999;
  box-shadow: 0 5px 5px -5px #999;
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 3px 0; }
  
 .feedburnerSub-wrapper { 
  background-repeat: repeat;
  background-position: 0 0;
  background-color: #f7f7f7;
  *background-image: url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png);
  background-image: url(http://weblusive.com/buildpress/style-switcher/assets/img/7.png);
  color: #111; 
  font-size: 14px; 
  line-height: 20px; 
  padding: 10px 20px; 
  text-align: center; 
  text-transform: uppercase; }
  
 .feedburnerSub-form { clear: both; display: block; margin: 10px 0; }
 
 form.feedburnerSub-form { 
  clear: both;
  display: block;
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  border-radius: 3px; 
  margin: 10px 0 0;
  width: auto; }
  
 .feedburnerSub-email-field { 
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px; 
  background: #fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #444;
  margin: 0 0 15px;
  padding: 10px 40px;
  width: 95%; }
  
 .feedburnerSub-email-button {
  background: #09f; /* buton rengi */
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #007fff; /* buton kenerlığı */
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent; /* buton gölge efekti */
  color: #fff; /* buton yazı rengi */
  cursor: pointer;
  font-weight: 700;
  padding: 10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  text-transform: uppercase;
  width: 95%; }
  
 .feedburnerSub-email-button:hover, .feedburnerSub-email-button:focus { background: #1ca4ff; /* buton aktif ve üzerine gelindiğinde */}
 
 .feedburnerSub-email-button:active { /* buton tıklandığında gölge efekti */
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
  box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0; }
</style>

<b:if cond='data:blog.pageType == "item"'>
<div id="feedburnerSub" style="margin: 20px 0;">
 <div class="feedburnerSub-wrapper">
  <p>E-posta bültenine abone olarak yeni yazılardan haberdar olun !</p>
  <div class="feedburnerSub-form">
   <form action="http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci" class="feedburnerSub-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input name="uri" type="hidden" value="ozkiremitci" />
    <input name="loc" type="hidden" value="tr_TR" />
    <input class="feedburnerSub-email-field" name="email" autocomplete="off" placeholder="E-postanızı Yazınız" required="required"/>
    <input class="feedburnerSub-email-button" title="Abone Olmak İçin Tıklayınız" type="submit" value="Şimdi Abone Ol !" />
   </form>
  </div>
 </div>
</div>
</b:if>

Aynı şekilde yukarıdaki kodu kopyalayarak üst tarafda bir gadget olarak da ekleyebilirsiniz. İyi Bloglar :)

6 yorum

  1. Süpersiniz. Epeyce aradığım bir eklentiydi. Gerçi ben birçok eklentiyi ararım :) Anlamadığım bloğunuza daha önce nasıl rastlamadığım Daha doğrusu yeni yeni rastlamaya başlamam ?

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim.

      Blogger ile yazılabilecek bir çok konu varken ben bir takım olması gereken ayarlardan başladım. Bundan sonraki konularda blogger ve wordpress alt yapıları için arama motoru optimizasyonuna yer vermeyi düşünüyorum.

      Yeni yeni vakit bulduğum da tam çözüm konular paylaşmaya gayret ediyorum. Bu yüzden daha önce karşılaşmamış olmanız normaldir :)

      Sil
  2. Bundan sonra takipçinizim. ßaşarılarınızın devamını dilerim..

    YanıtlaSil
  3. Mrb. Size bir sorum olacak, nereden sorsam bilemedim. Umarım burası sorun olmaz. Sitemde bu yan taraflarda kalan boşluğun sayfayla bütünleşmesini istiyorum ama nasıl yapabileceğimi bir türlü bulamadım. Acaba bilginiz varmı yardımcı olabilirmisiniz ?

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, Site adınızı ve yapmak istediğinizi ozkiremitci@gmail.com adresine eposta olarak gönderin. Müsait olduğumda inceleyim Erkan Kaba.

      Sil

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0