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=cemozergungor

Bağlantıda ki "cemozergungor" 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 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.

action="http://feedburner.google.com/fb/a/mailverify?uri=cemozergungor"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cemozergungor', 'popupwindow', 'scrollbars=yes,width=640,height=480');return true">
Aşağıdaki Kutuya Email Adresinizi Giriniz:
cemozergungor
" name="uri"/>




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.



E-posta bültenine abone olarak yeni yazılardan haberdar olun !
cemozergungor
" class="feedburnerSub-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cemozergungor', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
cemozergungor" />








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ı




Yazılar E-postana Gelsin mi?
E-postayı girin ve gelen maili onaylayın. Artık son yazıları e-postanızdan takip edebilirsiniz.
cemozergungor
" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cemozergungor', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">







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

0 yorum