Blogger İletişim Form Gadget’i İle İletişim Formu Düzenleme

Blogger Gadget ekle İletişim form seçeneğini kullanarak blog ana sayfa sidebar da görülmeyen, sadece Statik Sayfa Menü çubuğunda görülebilen, Blogger iletişim formu kurulum aşamaları. Blogger Gadget seçeneklerinde üçüncü taraf geliştiriciler tarafından sağlanan İletişim form kodlarında küçük bir değişiklik yaparak menü çubuğunuzda oluşturacağınız statik bir iletişim sayfası ile iletişim formunuzu oluşturmanız mümkündür.

Blogger’un üçüncü taraf İletişim formu gadgetini oluşturmadan önce 30 Eylül 2015 tarihin de, Google’un Online Güvenlik resmi bloğunda HTTPS’nin Blogger için yapılandırıldığı açıklaması ile, Blogger HTTPS Güvenlik Güncellemesini geçildiğini belirtmişti. Blog ayarlarınızda HTTPS güvenliğini Evet olarak seçtiyseniz, Blogger Gadget seçeneklerinde üçüncü taraf geliştiriciler tarafından sağlanan İletişim form açıklamalarında “ Üçüncü taraf Geliştiriciler Tarafından eklenen bazi gadget'ler HTTPS ile uyumlu olmayabilir. Daha Fazla Bilgi Edinin” açıklamasını görebilirsiniz.

Gadget kodları üzerinde yapacağımız küçük bir değişiklikle sadece sidebar da görülebilen iletişim formunu menü çubuğu sayfalar sekmesine İletişim ismi ile taşıyacağız..

Yeni blog kuran yazar arkadaşlara yardımcı olması açısından statik sayfa nedir kısaca bir açıklama yapalım. Statik sayfa menü çubuğunuza sayfalar yardımı ile eklenen sabit kalıcı bağlantıdır. Yani yazılarınız gibi ana sayfada akıcı değildir. Menü çubuğunda İletişim form veya iletişim ismine tıklandığında sadece o sayfa ile ilgili açıklama mesajı görülür ve bulunduğu yer sabittir. Ayrıca İletişim Form’u üst kısmına bir resim, alt kısma ise bir açıklamada ekleyebilirsiniz. Blog’’unuza İletişim formunu nasıl ekleyeceksiniz ile ilgili açıklamaları aşağıda adım adım takip ederek uygulamaya başlayalım.

Blogger İletişim Form’u nasıl eklenir :

1. Blogger iletişim formu gadgetini blogunuzun Sidebarına öncelikle ekleyin. Blogger iletişim formu gadgetini eklemek için, Blogger kumanda paneline girip ; sırası ile şu adımları uygulayın.
→ Yerleşim → Gadget ekle → Diğer Gadgetler yolunu takip ederek açılan listeden İletişim Formu gadgetini seçin.

2. İletişim formunun blog ana sayfa sidebarda görülmesini istemediğimiz düşüncesi ile forum kodlarında küçük bir değişiklik yapmamız gerekiyor. Blogger’un kumanda paneline giriş yaparak, Şablob → HTML’yi Düzenle → Widget’a Atla, penceresini açtıktan sonra ContactForm1 ismine tıklayarak iletişim formuna ait kodları açın. Kodların olduğu bölüme geldiğinizde, sol sütun satırında bulunan ok ▶ ikonuna tıklayarak kodların genişletilmesini sağlayın. Genişleme işlem sonrası iletişim formuna ait kodları şu şekilde göreceksiniz. Linke tıklayarak Google Drive’e kayıtlı kodları bu linkten inceleyin. (İşlem yapacağımız alan mavi ile belirtilmiştir)
3. Yukarıda verilen linki açtı iseniz silmeniz gereken mavi alanı görmüş olmalısınız. Mavi olarak gördüğünüz bu alana dikkati bakarak kodların başlangıç ve bitiş yerlerini belirleyip silip şablonu kaydedin. Sildiğiniz kodların sonucunda Ana sayfa sidebar da biraz önce eklediğiniz iletişim formu gadget olarak görülmeyecek. Son olarak Menü çubuğunuza statik sayfa İletişim formunu ekleme işlemine gelmiş durumdayız.

Sayfamıza İletişim Formu kodlarının eklenmesi :

1. Blogger kumanda panelinize giriş yapın.
2. Sol menüden Sayfalar ismine tıklayın ve üst kısımda Yeni sayfa seçeneği ile blog editörünü açın. Üst başlık kısmına İletişim veya İletişim Formu yazın.
3. Blog yazı editörünüze verilen kodları eklemek için sol üst kısımda bulunan HTML ismine tıklayarak açık konuma getirin ve aşağıda verilen kodları HTML modunda iken yapıştırın.


İletişim Form Kodları :
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'> 
 <div class='form'> 
   <form name='contact-form'> 
     <p>İsim<p> 
     <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> 
     <p>E-Posta *</p> 
     <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> 
     <p>Mesaj *</p> 
     <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> 
     <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder'/> 
     <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> 
     <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> 
   </form> 
 </div> 
  </div> 
</div> 
Blgonuzu şimdi önizleme yapın herhangi bir sorun yoksa sayfayı kaydedin ve yayınlayın.
4. Yukarıda hazırlamış olduğunuz iletişim formunun güzel görülmesini sağlayan CSS Stil kodlarımızın düzenlesine geçerek uygulamaya başlayalım. Sırası ile adımları takip edin.
→ Şablon → HTML’yi Düzenle yolunu takip ederek, CTRL+F klavye kısa yol aramasını kullanarak şu etiketi aratın (</b:skin>) ve bulduğunuz bu etiketin hemen üstüne aşağıdaki CSS Stik kodlarını ekleyin.

CSS Stik kodları :
/* Guney59 İletişim Form Sayfası */ 
.contact-form-widget { 
width: 500px; 
max-width: 100%; 
margin: 0 auto; 
padding: 10px; 
background: #E6E7E8; 
color: #000; 
border: 1px solid #656E75; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); 
border-radius: 10px; 
}
.contact-form-name, .contact-form-email, .contact-form-email-message { 
width: 100%; 
max-width: 100%; 
margin-bottom: 10px; 
}
.contact-form-button-submit { 
border-color: #656E75; 
background: #E6E7E8; 
color: #000; 
width: 20%; 
max-width: 20%; 
margin-bottom: 10px; 
}
.contact-form-button-submit:hover{ 
background: #679EC9; 
color: #ffffff; 
border: 1px solid #FAFAFA; 
} 
/* Guney59 İletişim Form Sayfası */
Blog şablon kodlarınızı kaydedin. Statik iletişim sayfanızı açıp bilgilerinizi girerek mail gönderin. Google mail e-postanızı kontrol edin.

İletişim Form’u için ek özelleştirilmesi :

1. Eklediğiniz kodların hemen üst kısmına yukarıda ilk resimde gördüğünüz gibi bir resim ekleyebilirsiniz. Nasıl görüleceği ile ilgili hazırladığım iletişim form’una bakabilirsiniz.
2. HTML modunda iken kodların en alt kısmına şu yazıları ekleyebilir, oluştur ismine tıkladıktan sonra yazı karakterlerini istediğiniz gibi değiştirin. Örnek yazı :
LÜTFEN FORM'A YAZMADAN ÖNCE BU BİLGİLERİ OKUYUN !
Yazılan yazılar ile ilgili sorularınızı “ Comment ” Yorum penceresinden iletiniz. Yorum ve cevaplar tüm okuyucuya faydalı olabilmesi açısından önemlidir. Her soru ve cevabın okuyucuya yol gösterebileceğini unutmayın. Özel bir neden ile ! Yorum penceresinde görülmesini istemediğiniz konular için sorunuzu iletişim sayfasından yazabilirsiniz. ALAKALI OLMAYAN SORULARA CEVAP VERİLEMEYECEĞİNİ LÜTFEN UNUTMAYINIZ.
İlginize teşekkür ederim.
NOT : Google Formlar üzerinden asla şifre göndermeyin.”