💥 Çoğunuz Blogger widget dizinine yeni eklenen, isim ve e-posta için iki giriş alanı ve mesaj yazmak için bir metin alanı içeren küçük bir iletişim formu eklentisini biliyorsunuzdur. İletişim sayfamız için karmaşık bir PHP Formu kullanıyoruz, ancak Blogger bunu sizin için son derece kolaylaştırdı. Bu basit formu, blogunuzun genel görünümüne yepyeni bir hava katabilecek profesyonel görünümlü bir iletişim formuna nasıl dönüştürebileceğinizi hiç merak ettiniz mi? Neyse ki tüm MBT okuyucuları bugün bu ipucunu öğrenecek ilk kişiler olacak. Ayrıca, bu formu blogunuzun herhangi bir yerine nasıl ekleyeceğinizi de öğreneceksiniz! Bugün biraz vaktim vardı, bu yüzden birkaç yeni CSS3 efekti ekleyerek ve ziyaretçilerinizin yeni bir mesajı yeniden yazmak istemeleri durumunda mesajı sıfırlayıp silecek "Temizle" adlı ek bir düğme ekleyerek bu iletişim formunun özel bir sürümünü tasarladım. Lütfen aşağıdaki Demo'yu inceleyin:
💭💥💬Not: İletişim Formunu statik bir sayfaya ve kenar çubuğuna ekledik. Bu Özel Formu istediğiniz yere ekleyebileceğinizi göstermek için. Statik sayfada kenar çubuğundaki Form görüntülenmeyecek, ancak diğer tüm sayfalarda görüntülenecektir.
Eğitim Kılavuzu:
Bu eğitimi 4 bölüme ayırdık:
- Normal İletişim Formu widget'ını kenar çubuğuna ekleme
- Widget Görünümünü Kontrol Etme
- İletişim Formunu Özelleştirme
- Son olarak Özelleştirilmiş İletişim Formunu Kenar Çubuğuna, Gönderiye veya Statik Sayfaya Ekleme
1. Kenar Çubuğuna İletişim Formu Ekleme:
Blogger varsayılan olarak bu widget'ı yalnızca kenar çubuğunuza eklemenize izin verir, ancak tarayıcı kaynak dosyasını (Ctrl + U) görüntüleyip HTML kodunu kopyalayarak herhangi bir gönderiye veya statik sayfaya kolayca yerleştirebilirsiniz. Ben tüm zahmeti üstlendim, bu yüzden yalnızca aşağıdaki kolay adımları izlemeniz yeterli:
- Blogger > Düzen'e gidin
- Gadget Ekle'ye tıklayın
- Ardından "Daha Fazla Gadget"a tıklayın ve aşağıda gösterildiği gibi ilk widget'ı seçin:
4. İletişim formu eklentinizi Blogger'a başarıyla eklediniz veya başka bir deyişle kaydettiniz.
5. Bu eklentiyi kaldırmayın ve olduğu gibi bırakın. Eğer kaldırmaya çalışırsanız, kodlayacağımız Özelleştirilmiş İletişim Formu çalışmayacaktır. Bu eklentiyi kenar çubuğundan kesinlikle gizleyeceğiz.
2. Widget Görünümünü Kontrol Etme
Oluşturduğunuz iletişim formunun #ContactForm1 kimliği var. Bu kimliği kullanarak blog kaynak dosyanızdaki normal formun HTML kodunu kolayca bulabilirsiniz. Tüm işlemleri zaten hallettiğimiz için, şu kolay adımları izlemeniz yeterli:
Kenar çubuğundaki Normal Formu Gizle
- Blogger > Şablon'a Git
- Şablonunuzu Yedekle
- HTML'yi Düzenle'ye Tıkla
- </head> Ara
- Hemen üstüne, kenar çubuğundaki widget'ı gizleyecek aşağıdaki koşul ifadesini yapıştırın:
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>
Yukarıdaki kod, Normal İletişim Formunu yalnızca Statik bir Sayfada gizleyecektir. Özel İletişim Formunu bir Gönderiye eklemek isterseniz, bunun yerine aşağıdaki kodu kullanabilirsiniz:
<b:if cond='data:blog.url == "URL OF Selected Post"'>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>
Seçili Gönderinin URL'sini, iletişim formunu ekleyeceğiniz Gönderinin URL'siyle değiştirin.
DEMOMUZDA iletişim formunu statik bir sayfaya eklediğimiz için 5. adımdaki ilk kodu kullandık.
3. İletişim Formunu Özelleştirme - Eğlenceli Kısım!
Eğitimi kolaylaştırmak için bu kısım, eğitimin 2. Bölümünde ele alınacaktır.
2. Bölümü okuyun: Blogger İçin Özel Bir İletişim Formu Oluşturun!
Görüşlerinizi aşağıda paylaşın ve yarınki harika ipuçları için bizi takip etmeye devam edin! Sevgiler ve saygılar dostlar :)
Post a Comment