Blogger E-Posta Abonelik Formu Sade ve Şık Tasarımlı

Blogger için tasarlanmış olan gayet sade ve kullanışlı eklemesi kolay abone formunu blogunuza eklemeyi anlatcağız.Ziyaretçileriniz Email adreslerini yazıp kaydet butonuna bastıklarında yayınladığınız yeni yazılarınız abone olan kişilerin mail adreslerine kısa özet halinde gider.Böylelikle abone olan ziyaretçiler yeni yazılarınızdan anında haberdar olur.İyi bir ziyaretçi ve backlink alma yöntemi olduğunu belirtmek gerekir.Normalde bloggerin kendi eklentileri içerisinde de E-Posta ile Takip Et şeklinde bir eklenti zaten mevcut, bizim yayınladığımız tasarım olarak değiştirilmiş, göze biraz daha hoş gelen, aynı işi yapan bir eklenti.
DEMO GÖRÜNÜM E-Posta Aboneliği Formunu Blogunuza Eklemek için:

1. Blogger Hesabımızla Giriş Yapıyoruz.
2. Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip, açılan gadget içerisine aşağıdaki kodu kopyalayıp yapıştırıyoruz.

<!-- Start E-Posta Form Code http://blogokulu.org/ -->
<style>
.abt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkEBlInnkcAluuLphpZqfYgLGytzqwN4T30cTyHDTSQpJoXDQhEIsTBYHiRGcYQyiK_59H72oxAgL1zUt0XuOQQSPaIlU96053opW3qBrsnDlUJfz4nU_MbMSjr3F2-sNVSVst9Tme3Y/h120/service-email.jpg) no-repeat -8px 10px ;
width:240px;
padding:10px 0 0 65px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
box-shadow: 1px 1px 5px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.abt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4.4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);

}
.abt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 30px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }

</style>

<div class='abt-email'>
E-Posta Aboneliği
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogOkulu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="E-Mail Adresiniz..." type="text" />
<input type="hidden" value="BlogOkulu" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="abt-emailsubmit" value="Kaydet" type="submit" />
</form> 

</div>
<!-- End E-Posta Form Code http://blogokulu.org/ -->

Kod İçerisinde:

1. http://feedburner.google.com/fb/a/mailverify?uri=BlogOkulu yazan yere BlogOkulu yerine kendi feedburner adresinizi yazıyorsunuz.
2. Renkli olarak belirttiğim diğer E-Posta Aboneliği, E-Mail Adresiniz...,Kaydet yazılarınıda E-Posta Abonelik formunda gördüğünüz ve metin üzerinde değişiklikler yapabileceğiniz kısımlar.

Son olarak değişiklikleri yaptıktan sonra eklediğimiz E-Posta Abonelik Gadgetini kaydedip görünmesini istediğimiz yere sürükleyip bırakıyoruz.Blogger için E-Posta Abonelik Formu Kutusu kullanıma hazır.