Blogger Sidebar Abonelik Eklentisi

Blogunuzun sidebarına mail abonelerinizi ve sosyal medya takipçilerinizi arttıracak bir eklenti eklemek istiyorsanız çok beğendiğim bu yeni eklentiyi sizlere tavsiye edeceğim.

Geliştirilmeye ve kişiselleştirilmeye çok müsait olan bu eklenti ziyaretçilerinizin dikkatini çekerek özellikle FeedBurner mail abone sayınızın artmasını katkı sağlayacaktır. Eklentinin özelliklerinden kısaca bahsetmem gerekirse:

  • Mobil cihazlara uyumludur ve sorunsuz görüntülenmektedir.
  • Sadece 3 adet kod değişikliğiyle eklentinin renklerini blogunuzun tasarımıyla uyumlu hale getirebilirsiniz.
  • Font Awesome kullanılarak şık ve hızlı sosyal butonlar eklenmiştir.
  • Blogger’da son zamanlarda HTTPS’e geçişle birlikte yaşanan sorunlardan etkilenmeyecek şekilde düzenlenmiştir.
Blogger Sidebar Abonelik Eklentisi


Blogger Sidebar Abonelik Eklentisi Nasıl Eklenir?

Öncelikle şablonun HTML kodlarına yukarıda bahsettiğim Font Awesome’ı eklemeniz gerekiyor. Bunun için Blogger kumanda panelinizde Şablon > HTML’yi Düzenle yolunu takip edin ve <head> kodunun altına şu kodu ekleyin:

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

Ekledikten sonra şablonu kaydedin ve ikinci adım için yine Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek aşağıdaki kodları yapıştırın:

<style>
#sidebar-abonelik {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 10px;
  border: 0;
  background: #363636;
}
#sidebar-abonelik .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 24px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  border-radius: 10px 10px 0 0;
  background-color: #679EC9;
}
#sidebar-abonelik .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
}
#sidebar-abonelik p {
  font-size: 14px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
}
#sidebar-abonelik .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#sidebar-abonelik .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 12px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#sidebar-abonelik .rssform .button:hover {
  background: #656E75;
}
#sidebar-abonelik .rssform .button {
  background: #679EC9;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
#sidebar-abonelik .bottom_lock_policy {
  background: url(https://lh3.googleusercontent.com/-h4tOFZoH2GU/VyxnzJrVMcI/AAAAAAAAL94/7Lzr6v77qpwveZhbMRMH4n7irV-Rw6u1gCCo/s24/Keys-icon.png) no-repeat 3% -2px;
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 1px;
  line-height: 25px;
}
#sidebar-abonelik .bottom_lock_policy a {
  color: #959595;
  text-decoration: none !Important;
}
#sidebar-abonelik .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
}
#sidebar-abonelik .social_profiles a:hover {
  color: #FFF;
  background-color: #679EC9;
  border-color: #FFF;
}
#sidebar-abonelik .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#sidebar-abonelik form {
  margin-bottom: 10px !important;
}
</style>
<div id="sidebar-abonelik">
            <div class="main_tagline">E-Posta Aboneliği</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Yeni yazıların ücretsiz olarak mail adresinize gelmesi için abone olun!</p>
   <div class="rssform">
            <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BlogHocam', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="E-Mail adresiniz..." />
            <input type="hidden" value="BlogHocam" name="uri" />
            <input type="hidden" name="loc" value="tr_TR" />
            <input value="Abone Ol" class="button" type="submit" />
            </form>
            </div>
      <div class="bottom_lock_policy">Gizliliğinize saygı duyuyoruz</div>
   <div class="social_profiles">
   <a href="https://www.facebook.com/BlogHocam" target='_blank' rel='nofollow' title="Facebook'ta Takip Et"><i class="fa fa-facebook"></i></a>
   <a href="https://www.twitter.com/BlogHocam" target='_blank' rel='nofollow' title="Twitter'da Takip Et"><i class="fa fa-twitter"></i></a>
   <a href="https://plus.google.com/+BloghocamBlogspot" target='_blank' rel='nofollow' title="Google+'da Takip Et"><i class="fa fa-google-plus"></i></a>
   <a href="https://instagram.com" target='_blank' rel='nofollow' title="Instagram'da Takip Et"><i class="fa fa-instagram"></i></a>
   </div>
            </div>

Kaydettikten sonra eklentinin eklendiğini görecekseniz. Kodlarda değiştirmeniz gereken yerler şöyle:


  • Kırmızı renkle gösterdiğim yerlere kendi sosyal medya hesaplarınızın URL’lerini yazın.
  • Lacivert renkle gösterdiğim yerlere kendi FeedBurner ID’nizi yazın.
  • Mavi vurguyla gösterdiğim yerlere ise istediğiniz bir renk kodunu girin. Bu şekilde E-Posta Aboneliği başlığının arka plan rengini, Abone Ol butonunun arka plan rengini ve sosyal butonların üzerine gelindiğindeki rengi değiştirebilirsiniz.

48 yorum:

  1. Merhaba bu kodları wordpress eklesek çalışır mı?

    YanıtlaSil
  2. Hocam, değerli paylaşımınız için şahsen çok teşekkür ederim.
    Bloğumda "Beğendiğim Bloglar" adında bir gadget açtım. Blog önerilerinizi bekliyorum.

    YanıtlaSil
  3. Çok teşekkür Serdar hocam. : )

    YanıtlaSil
  4. serdar hocam sorulara neden cevap vermiyorsunuz bir konuda yorumda gördüm ama cevap yazmamışsınız,bu sorunun cevabını bende merak ediyorum soru şuydu;

    Ben blogunuzda bir şey fark ettim;Ana sayfada yazı başlıklarınız H2 olarak gözükürken,yazıyı tıklayıp açtığımızda yazı başlığı H1 oluyor bunu nasıl yaptınız?Aynısını kendi blogumuda uygulamak istiyorum bu yüzden sordum...
    Cevabınız için şimdiden teşekkürler.İyi günler!..

    YanıtlaSil
  5. Bloglar için faydalı bir eklenti olmuş.

    YanıtlaSil
  6. Bloğuma ekledim ve gerçekten çok hoş duruyor , teşekkürler hocam .

    YanıtlaSil
  7. Merhaba hocam blogunuz gerçekten çok faydalı özellikle yeni yazmaya başlayanlar için,verdiğiniz bilgilere teşekkür ediyorum.

    http://medyoloji.blogspot.com.tr/

    YanıtlaSil
  8. Yazılarınız gerçekten çok yararlı hocam. Blog konusunda, bizlere gösterdiğiniz ilgiden dolayı size müteşekkirim... Yeni yazılarınızı dört gözle bekliyorum. Eger bloguma uğrarsanız bir ara! Sevinirim.

    bedenoyunu.blogspot.com

    YanıtlaSil
  9. merhaba.Azerbaycana reklam veren siteler tanıyor musunuz?

    YanıtlaSil
  10. Hocam verdiginiz kodlar icin çok teşekkür ederim

    YanıtlaSil
  11. Çok faydalı kodlar. Teşekkür ederim.

    YanıtlaSil
  12. faydalı kodlar teşekkürler hocam. Bu arada bloguma davetlisiniz

    YanıtlaSil
  13. her şeyi yaptım gerekli yerleri değiştirdim ama e posta girince
    besleme e-posta yoluyla abonelikler etkin değil
    yazısı geliyor nasıl çözeriz

    YanıtlaSil
    Yanıtlar
    1. Feedburner hesabından eposta aboneliğini etkinleştirmelisin.

      Sil
    2. nasıl yapabilirim anlatırmısınız ?

      Sil
    3. Şurada 7 numara: http://bloghocam.blogspot.com/2011/04/feedburner-kurulumu-ve-ayarlar.html

      Sil
  14. Wordpress' in de böyle güzel eklentileri var ancak bloggerında ondan aşağı kalır yanı yok doğrusu. Yine de wordpress biraz daha pratik gibi. Blogger eklentilerininse tasarımları biraz daha iyi. Kodlar için teşekkürler çok güzel ve yararlı bir paylaşım olmuş.

    YanıtlaSil
  15. teşekkürler hocam bende ekledim kendi bloguma hemen. bloguma bi göz atıp eleştiri yaparsınanız çok teşekkür ederim http://kisiseldoktor.blogspot.com.tr/

    YanıtlaSil
  16. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  17. Hocam blog adresimi inceleyip eksiklikleri hakkında bilgi verirmisiniz bana
    https://bilensayfa.blogspot.com.tr/ ilginiz için şimdiden teşekkür ediyorum

    YanıtlaSil
  18. Hocam gerçekten çok teşekkür ederim.Benimde bloguma uğrarsanız sevinirim.

    http://guncelbilgilericin.blogspot.com

    YanıtlaSil
  19. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  20. Hocam iyi günler benim blogum var Alan adı almayı düşünüyorum.Bu konularda yeniyim sizce alan adı almanın bir faydası var mı bide alan adı aldıktan sonra hosting de kiralamamız gerekiyor mu?
    Sizden cevap bekliyorum.Umarım en yakın zamanda yazarsınız.
    minecraftkilavuzum.blogspot.com.tr
    Şimdiden teşekkürler hocam.

    YanıtlaSil
    Yanıtlar
    1. Alan adının türlü avantajları var. Blogger'da alan adı aldıktan sonra hostinge gerek yok.

      Sil
    2. İlginiz İçin sağ olun hocam blogum hakkında tavsiyeniz varsa yazarsanız sevinirim.
      minecraftkilavuzum.blogspot.com.tr
      Şimdiden teşekkürler hocam.

      Sil
    3. Mrb isterseniz burayada bir bakabilirsiniz. http://bilgidenizimiz.blogspot.com.tr/2016/05/youtube-ile-kolay-ve-hizli-adsense-hesabi-almak.html

      Sil
  21. Serdar Hocam. Benim blogger sitem için sizden bir ricam olucak.En fazla hit alabileceğim bir blogger teması önerirmisiniz.Paylaşımlarımın hepsi bana ait.Desteklerseniz sevinirim.
    https://ttoyci.blogspot.com.tr/

    YanıtlaSil
  22. Çok teşekkürler açıklama için

    oyunajansi.blogspot.com

    YanıtlaSil
  23. teşekkürler hocam. Bunu wordpress sitesine eklemek isteyenler admin panelinde Görünüm --> Bileşenler kısmından Metin ' i seçerek orada bu kodları yerleştirerek halledilebiliyor. bu şekilde abuk subuk eklentilerle uğramak durumunda kalmıyoruz.

    YanıtlaSil
  24. Teşekkürler ekledim bende çok güzel oldu elinize sağlık
    https://tekno-beyin.blogspot.com/

    YanıtlaSil
  25. Uzun süredir böyle bişey arıyordum. Teşşekkürler

    YanıtlaSil
  26. Yardımlarınız için teşekkürler hocam.
    http://bedenoyunu.blogspot.com/

    YanıtlaSil
  27. Çok teşekkür ederim. Severek kullanıyorum.

    YanıtlaSil
  28. hocam çok teşekkür benim blogumu da ziyaret ederseniz sevinirim :)
    https://indirminecraftpe.blogspot.com.tr

    YanıtlaSil
  29. Harikaydı Siteme Eklendi Kendim Girib Linkleri Tazeledim ))

    YanıtlaSil
  30. Tasarımı çok güzel ve kullanışlı herkese tavsiye ederim. Yazı içinde teşekkürler. Faydalı paylaşımlarınızın devamını bekliyoruz kolay gelsin.

    YanıtlaSil
  31. Hocam ben dedikleriniz yaptım ama abone ol kısmı ve aşağısı sola doğru kayık kaldı nedenini anlamadım bide siz bakabilirmisiniz? https://bloggertavsiyem.blogspot.com.tr/

    YanıtlaSil
  32. Hocam mobil olarak çalışmıyor

    YanıtlaSil
  33. kod için teşekkür ederim. kendi bloguma şöyle uyarladım: https://sedirelam.blogspot.com.tr/?m=1

    YanıtlaSil
  34. Dediklerinizi yaptım abonelerime bildirim gitmiyor

    YanıtlaSil
  35. hocam verdiğiniz bilgiler için çok teşekkür ederim her konuda bana çok yardımcı oldunuz

    YanıtlaSil
  36. Gerçekten çok güzel eklenti. Teşekkürler hocam. Benim sitemede beklerim vaktiniz olursa.
    https://guzellikhikayesi.blogspot.com.tr/

    YanıtlaSil
  37. 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?

    YanıtlaSil
  38. güzel yazı için teşekkürler..

    YanıtlaSil
  39. Merhaba,
    Ben de web siteme beklerim, www.bloguzmani.com

    YanıtlaSil

Blogger tarafından desteklenmektedir.