Hazır Eposta Abonelik Form Tasarımları Blogger ve Wordpress


Feedburner abone ol formunun sade görünümden sıkıldıysanız işte size birkaç farklı form tasarımı. Basit üyelik formu olan abonelik sistemi için yazı, giriş metni ve buton tasarımı ile şık bir form sahibi olabiliriz. Formu kullanmaya başlamadan önce dikkat etmeniz gereken bir kaç ayrıntıya değineceğim.

Feedburner Hesabınızın Bağlantısı
Benim feedburner bağlantım;

http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci

Bağlantıda ki "ozkiremitci" yerine kendi feedburner hesabınızı yazmanız gerekiyor. Ben örneklerde kırmızı olarak işaretledim. Kullanmak istediğiniz form tasarımın da değiştirmeyi unutmayınız !

Form Varsayılan Değerleri
Oluşturduğum formda Yazı, kutu metni ve buton görünen yazı değerlerini değiştirebilirsiniz. Diğer sabit değerlere formun sağlıklı çalışması için müdahale etmemenizi tavsiye ederim.

Placeholder ve Required
Placeholder: Varsayılan olarak görünmesini istediğini yazı. Örneğin eposta kutusunda; example@eposta.com yazabilirsiniz.
Required: Abone Ol butonuna basıldığında e-posta kutusu boş ise popup pencere açılmadan önce uyarı verir.

Tasarımda Değişiklik
Form üzerinde yazı tipi, rengi, buton arka plan rengi gibi değişiklikleri yapmak isteyebilirsiniz. Bunun için <style></style> tagları arasında yazan css kodlarında değişiklik yapacağınız yerlere /* Açıkma Notları */ ekledim. Bu yönergeleri izleyerek değişiklik yapabilirsiniz.

Kullanma
Bloger yönetim panelinde Yerleşim > Gaget Ekle adımlarını izleyin. Açılan pencerede Html/Javascript' i seçin ve kodları yapıştırıp düzenlemeyi kaydedin.

Formlar hakkında genel bilgi verdikten sonra tasarımlara başlayalım...

I. Sade Tasarım

feedburner e-posta aboneliği tasarımı

Bu form yalnızca giriş elemanı ve butondan oluşuyor. Eğer sade bir tasarım istiyor veya üzerinde kendinize has değişiklik yapmak istiyorsanız bu tasarımdan yola çıkabilirsiniz.

<form style="border:0px solid #ccc;padding:5px 0;text-align:left;" 
  action="http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci" 
  method="post" target="popupwindow" 
  onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci', 'popupwindow', 'scrollbars=yes,width=640,height=480');return true">
  
 <p>Aşağıdaki Kutuya Email Adresinizi Giriniz:</p>
 <div style="margin-bottom: 12px;"><input type="text" style="width:260px; border-radius: 4px; height: 34px; font-size: 16px;font-weight:700; color:#2b2b2b; border: 1px solid #487BAF; padding: 2px 3px;line-height:1em;" name="email" placeholder="example@mail.com" required/></div>
 <input type="hidden" value="ozkiremitci" name="uri"/>
 <input type="hidden" name="loc" value="tr_TR"/>
 <input type="submit" style="padding:10px 12px;" class="btn btn-success" value="Gönder Gelsin !" />
</form>

II. Tasarım - Arka Plan ve Şeritler

feedburner e-posta aboneliği tasarımı

From renkli kenarlık, mavi buton ile kesik çizgi arka plandan oluşmaktadır. Buton rengini değiştirebilirsiniz. Değiştirmek için style kodları kısmında bulunan ".feedburnerSub-email-button" ve diğer mouse olaylarını düzenlemelisiniz. Açıklama metinlerindeki yönlendirmeleri takip edebilirsiniz.

<style>
 #feedburnerSub { 
  background: url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;
  font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
  -moz-box-shadow: 0 5px 5px -5px #999;
  -webkit-box-shadow: 0 5px 5px -5px #999;
  box-shadow: 0 5px 5px -5px #999;
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 3px 0; }
  
 .feedburnerSub-wrapper { 
  background-repeat: repeat;
  background-position: 0 0;
  background-color: #f7f7f7;
  *background-image: url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png);
  background-image: url(http://weblusive.com/buildpress/style-switcher/assets/img/7.png);
  color: #111; 
  font-size: 14px; 
  line-height: 20px; 
  padding: 10px 20px; 
  text-align: center; 
  text-transform: uppercase; }
  
 .feedburnerSub-form { clear: both; display: block; margin: 10px 0; }
 
 form.feedburnerSub-form { 
  clear: both;
  display: block;
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  border-radius: 3px; 
  margin: 10px 0 0;
  width: auto; }
  
 .feedburnerSub-email-field { 
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px; 
  background: #fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #444;
  margin: 0 0 15px;
  padding: 10px 40px;
  width: 95%; }
  
 .feedburnerSub-email-button {
  background: #09f; /* buton rengi */
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #007fff; /* buton kenerlığı */
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent; /* buton gölge efekti */
  color: #fff; /* buton yazı rengi */
  cursor: pointer;
  font-weight: 700;
  padding: 10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  text-transform: uppercase;
  width: 95%; }
  
 .feedburnerSub-email-button:hover, .feedburnerSub-email-button:focus { background: #1ca4ff; /* buton aktif ve üzerine gelindiğinde */}
 
 .feedburnerSub-email-button:active { /* buton tıklandığında gölge efekti */
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
  box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0; }
</style>

<div id="feedburnerSub">
 <div class="feedburnerSub-wrapper">
  <p>E-posta bültenine abone olarak yeni yazılardan haberdar olun !</p>
  <div class="feedburnerSub-form">
   <form action="http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci" class="feedburnerSub-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input name="uri" type="hidden" value="ozkiremitci" />
    <input name="loc" type="hidden" value="tr_TR" />
    <input class="feedburnerSub-email-field" name="email" autocomplete="off" placeholder="E-postanızı Yazınız" required="required"/>
    <input class="feedburnerSub-email-button" title="Abone Olmak İçin Tıklayınız" type="submit" value="Şimdi Abone Ol !" />
   </form>
  </div>
 </div>
</div>

III. Tasarım - Başlık Kullanılmış Form

Başlık ve kısa bir metin ile ziyaretçiden e-posta girişi ve onayı istenebilir.

feedburner e-posta aboneliği tasarımı


<style type="text/css">
 #feedburnerSub { 
  width: 100%; 
  font-family: Tahoma,Verdana,Segoe,sans-serif;
  border: 1px solid #51C0F9; 
  border-radius: 5px 5px 0px 0px; }
  
 #feedburnerSub .heading { /* Başlık tasarım kodları */
  padding: 10px 20px; 
  line-height: 20px; 
  font-size: 16px; /* Başlık yazı boyutu örn: 20px; */
  font-weight: 600; 
  color: #414141; /* Başlık yazı rengi */
  text-align: center;
  background: none repeat scroll 0% 0% #51C0F9; }
  
 #feedburnerSub p {
  font-size: 13px; 
  color: rgb(12, 12, 12); 
  line-height: 25px; 
  padding: 10px; 
  margin: 0; }
  
 #feedburnerSub .feedburnerSub-wrapper { padding: 0 10px; }
 
 #feedburnerSub .feedburnerSub-wrapper input { 
  color: rgb(170, 170, 170); 
  padding: 10px; 
  margin-top: 10px; 
  font-size: 15px; 
  width: 95%; 
  border: 1px solid #ccc; 
  border-bottom: 2px solid #ccc; 
  border-radius: 5px; 
  transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; }
  
 #feedburnerSub .feedburnerSub-wrapper input:focus { border-color: #D03838; outline: none; box-shadow: 0 0 2px 1px #D03838; }
 
 #feedburnerSub .feedburnerSub-wrapper .button { 
  background: #f56969; /* Buton arka plan rengi */
  color: white !important;  /* Buton yazı rengi */
  border: none; 
  outline: none; 
  border-bottom: 3px solid #D24343; /* Buton kenarlık rengi */
  transition: background .4s linear; 
  font-weight: 600; 
  cursor:pointer; }
  
 #feedburnerSub .feedburnerSub-wrapper .button:hover { background: #F95454; }
 
 #credit { margin: -5px 0 0px 15px !important; text-shadow:none; opacity:.6;}
</style>

<div id="feedburnerSub">
 <div class="heading">Yazılar E-postana Gelsin mi?</div>
 <p>E-postayı girin ve gelen maili onaylayın. Artık son yazıları e-postanızdan takip edebilirsiniz.</p>
 <div class="feedburnerSub-wrapper">
  <form action="http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ozkiremitci', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
   <input name="email" type="text" autocomplete="off" placeholder="E-posta Adresiniz" required="required"/>
   <input name="loc" type="hidden" value="tr_TR" />
   <input class="button" type="submit" title="Abone Olmak İçin Tıklayınız" value="Abone Ol !" />
  </form>
 </div>
</div>

Başka bir yazıda görüşünceye dek hoşçakalın. İyi Bloglar.

Tüm tasarımları ve kodları tek bir dosyada indirmek için tıklayınız.


Kaynaklar
http://www.ogbongeblog.com/2015/03/awesome-sidebar-feedburner-email-subscription-form.html
http://reviewblogging.blogspot.com.tr/2015/06/stylish-email-subscription-box-with-social-media-icons.html

2 yorum

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0