Blogger E-Posta Abonelik Form Dizaynı

Blogger Dersleri - Blogger E-Posta Abonelik Form Dizaynı

Blogger Dersleri kuşağında e-posta abonelik sisteminden bahsetmek istiyorum. FeedBurner ile oluşturduğumuz Rss beslemelerini E-mail ile kullanıcılarımıza göndererek sabit ziyaretçi elde etmenin nasıl yapılabileceğini Blogger FeedBurner E-Posta Abonelik kısmında açıklamaya çalışmıştım. FeedBurner'ın sunduğu abonelik sisteminin sunumunu beğenmeyenler için daha şık bir görünüm elde edebileceğiniz bir kod dizini sunuyorum.

Blogger E-Posta Abonelik Form Demo

E-Posta Aboneliği

Blogger E-Posta Abonelik Form Kodları :

<style>
.abt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHpisdj3N5NAkun3sn28HfSiwskKaw42UwA2Pm6COlZTD0oNzVLeuiGqTqLoRjDixQFa1lLxYQqYkmWFkkLyf1BMZVlf5r1yKzvD3JfvnHLYtIusz1lMazDhbAkcXIMbaGKbgkh8J8WBU/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=blogger-dersleri', '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="blogger-dersleri" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="abt-emailsubmit" value="Kaydet" type="submit" />
</form>

</div>

Blogger E-Posta Abonelik Form Dizaynı İçin Değişiklikler

Blogger-dersleri olarak yazılmış alana kendi FeedBurner adresinizi yazmalısınız. Gadget ekle diyerek şablon içerisinde kullanabilir yada istediğiniz sayfalara özel olarak ekleyebilirsiniz.