BLOGGER ABONE OL EKLENTİSİ

Günümüzde blogger sahipleri birbirlerini tanımakta ve birlikte iletişim halindedirler. Bir nevi aile tablosu oluşmuştur. Bu kimi zaman sohbet amaçlı kimi zamanda blog sahiplerinin daha iyi blog düzenleyebilmeleri içindir. Birbirlerinin yayınlarını takip edebilmeleri için aynı Youtube tarzı abonelik eklentileri mevcuttur. Bu yazımızda sizlere blogunuz için şık abonelik eklentisi paylaşacağız.

Blogger Abone Ol Eklentisi

Fontawasome tarafından hazırlanmış ve abone ol butonun hemen altında sosyal paylaşımları bulunan eklenti ile daha fazla takipçiye sahip olacaksınız.

Blogger Abonelik Eklentisi Nasıl Eklenir?

1- İlk olarak blogger panelinden Şablon>HTML Düzenle diyerek aşağıdaki kodu kodunun hemen altına ekleyin.

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

2- Ekledikten sonra şablonu kaydet diyoruz. Şimdi yine kumanda panelinden Yerleşim>Gadget Ekle>HTML JavaScript Gadget diyerekaşağıdaki kodları ekliyoruz.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUUwjs-HgMaRrIf_-S7w-yRaIxC7C24jK3Zw-rixjbDwnYd0250zHR7HaYyD2qA-Ox1qOJNs2oox22HYareiTc-fJjDbeTf_YYAs3-juifNNyUiaMz8pyxBDBqsgsVW9Xpw_1SwX3LG9ij/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="SpekulatifBeyin" 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/spekulatifbeyin" target='_blank' rel='nofollow' title="Facebook'ta Takip Et"><i class="fa fa-facebook"></i></a>
   <a href="https://www.twitter.com/beyinoffice" target='_blank' rel='nofollow' title="Twitter'da Takip Et"><i class="fa fa-twitter"></i></a>
   <a href="https://plus.google.com/googleid" 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>

Son olarak mavi renkli yere kendi feedburner adresinizi ve kırmızı yerlere kendi sosyal adreslerinizi eklemeniz yeterli olacaktır.