Blogger Mavi Renkli Abone Ol Gadget Eklentisi

Blog okuyucu kitlenizin Web sitenize Abone olmasını kolaylaştıran, mavi renkli Abone Ol Gaget eklentisi. Blogger’un gadget seçeneklerinde bulunan Abone Ol gadget eklenti görselinden çok daha farklı ve şık bir görselliğe sahip mavi renklerin hakim olduğu “Haber kaynağına Abone Ol” veya “Abone Ol”, gadget eklentisini aşağıdaki açıklama ve kodları ekleyerek kullanabilirsiniz.

Mavi renkli dekoratif Abone Ol eklentisini blog’unuzun sol, sağ sidebar alanına veya alt açıklama, Footer alanına ekleyebilirsiniz. Eklentiyi hangi alana eklerseniz ekleyin, gadget bulunduğu yerin genişlik ebatlarına uyum sağlayacaktır.

Abone Ol eklentisi için sizin bir ayar yapmanız gerekmiyor. Yapmanız gereken tek işlem, FeedBurner bağlantı linkinizi kodlar içine ekleyerek mavi dekoratif abone ol eklentisini hemen kullanmaya başlamaktır. FeedBurner için henüz bir hesap oluşturmadı iseniz aşağıda verilen ilgili linklerden başlayabilirsiniz.

⇒ Blogger Eklenti Örneği : Guney4 (Sidebar sütununda inceleyin)

→ FeedBurner Nedir

Ayrıca okuyun ⇒ Feedbur kategorisindeki diğer makaleler.

Mavi renkli Abone Ol eklenti kurulumu :

1. Blogger kumanda paneline giriş yapın.

2. Yerleşim → Gadget ekle → Html/JavaScript, gadgetini açın ve aşağıda verilen kodları gadget içine yapıştırıp, kaydedin.

Abone Ol Kodları :

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=guney59', 'popupwindow', 'scrollbars=yes,width=570%,height=520');return true" class="login">
 <h1>HEMEN ABONE OL</h1>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCp627nEEvbzsA4NL5ov6uAO2ozxm18xVawOsaaeO4ZVyRlNrYv34v7fm5UAWuk6XbW_01Iqa8P5RE96PTkU-HLtryPHrXi8qebSti898RYTKNortTZLXwFp6Hy01oalGG-Sc7asugOa7r/s1600/adnanguney-mail.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Haber kaynağına ücretsiz kayıt ol &nbsp;</span></font></center><br/>
 <input type="hidden" value="guney59" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address"/>
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Gönder" class="login-submit" />
</form>
</center>
<style>
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
 font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
 padding: 15px 0 0 0;
 width:200px;
 color: #993300;
    text-align: center;
 filter: alpha(opacity:90);
 KHTMLOpacity: 0.90;
 MozOpacity: 0.90;
 opacity: 0.90;
}
a.tt:hover span.top{
 display: block;
 padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
 display: block;
 padding: 0 8px;
 }
a.tt:hover span.bottom{
 display: block;
 padding:3px 8px 10px;
 color: #548912;
}

::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:-moz-placeholder {
  color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
  color: #bcc0c8;
}
:-ms-input-placeholder {
  color: #bcc0c8 !important;
}
.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}
.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login {
  padding: 18px 20px;
  width: 80%;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}
.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 10px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration:underline;
}
</style>

Abone Ol Gadget Eklentisinin Özelleştirilmesi :

1. Kodların eklentiği üst kısımda 2 adet “Guney59” ismi bulunmaktadır. Bunlar mavi ile renklendirilmiştir. Kendi Feedburner isminiz ile değiştirin.

2. Kodlar içinde yazılı metinleri istediğiniz bir isimle değiştirebilirsiniz.

3. Blog, yerleşiminde sidebar yani kenar alanlarına veya alt bilgi dediğimiz footer gadgetlerinizin yanına da koyabilirsiniz.

İpucu : Yukarıda verilen kodları bir metin dosyasına yapıştırıp çalışmanızı metin dosyasında düzenleyip tüm kodları alıp gadget içine ekleyin.