11 Temmuz 2019 Perşembe
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
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.
" name="uri"/>II. Tasarım - Arka Plan ve Şeritler
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 !
" 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.
Yazılar E-postana Gelsin mi?
E-postayı girin ve gelen maili onaylayın. Artık son yazıları e-postanızdan takip edebilirsiniz.
" 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
Bunu Paylaş :
comment 0 Yorum
more_vert*Lütfen yanlızca yazı ile ilgili yorumlar yazınız.
*Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın.
*Bir Google Hesabınız yoksa Yorumlama Biçimi seçeneklerinden "Anonim" tıklayıp yorum yapabilirsiniz.