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ülebil...
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.
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.
<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>
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ı */
İ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.”
![WhatsApp Web nedir ve nasıl kullanılır? [2024]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJt7nlfi8l1ytAQGJq9zbrIeegCxEbj9BRxc9Zfv0glEhTMaw3ARf0kISYVZ-oJn5jb8sI1rBxsBSPLQnk506H1gXUpa5kiR_Nri6AxfCG_LsRKJ1NC0IL7KuJr8HeqrRGp6t2jyVGr-JN2z7kpTi6uNvYUYocuBvs9GM5u4bHvj9Tjs6yuMOGxnadDwo/w150/1.jpg)
Hiç yorum yok
Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.