Blogger'de gün geçtikçe güncellemeler ve daha fazla kullanaılmasına olanak sağlayan özelliklerin eklenmesinden dolayı milyonlarca kişi ücretsiz ve kullanışlı olan blogger sitesi açmaktadır.Bu yüzden her sitenin de güzel olabilmesi için en önemlisi site yöneticisine nasıl ulaşılabileceğinizi bilmeniz gerekir.
Herhangi bir sitenin candamarı sayılarn en önemli bulunması gereken maddelerden biride iletişim formudur.İletişim formu sitelerde kullanılmasının ziyaretçilerin site yöneticisine rahatlıkla ulaşması demektir.Çoğu sitelerde bu iletişim sorunu oldukça yaygındır,yeni başlayanlar içinde aynıdır.
Şimdi bloggerde iletişim formu eklemenin bir çok yolu vardır;kolay yöntem ve zor yöntem olarak ikiye ayırabiliriz.Html,Css,Javascript kodlama yöntemini bilen kendine göre iletişim formu yazırlayabilir,tabi bunda en önemlisi yapmış olduğunuz formun çalışabilir olmasıdır.Blogger'de gadget olarak blog sitenize hazır iletişim formu ekleyebiliyortuk,ama blogger üst menü sitebarda bu gadgeti ekleme şansımız yoktu.Blogger'in diğer sitelerden daha fazla güncellemesi olduğundan şimdi rahatlıkla istediğimizi yapabiliyoruz,buna HTML5 özelliğinin de eklenmesi daha fazla seçenek ve kullanım kolaylığı saylamakdadır.
Neyse şimdi fazla kafanızı yormadan blogger sitenize blogger iletişim formu gadgeti'nin özelliğini üst sidebarda menü olarak eklemeyi anlatmaya geçelim.Uygulamaya geçtiğimizde ne demek istediğimi anlayacaksınız.
1.ADIM:
Öncelikle yapmanız gereken blogger'in iletişim formu gadgeti'ni sitebarına eklemeniz gerekiyor.Bunu eklemek için Kumanda Paneli > Yerleşim > Gadget Ekle > Diğer Gadgetler seçeneğine gelerek İletişim Formunu bularak gadgeti seçerek blogunuza eklemektir.Altta ki resimde ki sıralamanın aynısını yapın.
İletişim formunun sitebarda olmasını istemediğimiz için bu adımda formun gadget olarak görünmemesi için kod değişikliği yapacağız.
Kumanda Paneli > Şablon > HTML Düzenle yolunu izletikden sonra Widget'a Atla > ContactForm1 diyerek iletişim formuna ait kodları şablon kodları içinde buluyoruz.Bu bölümde ki kodların sol tarafında ▶ işaretine tıklayarak kodları genişletin.Kodları genişletme işlemi yaptığınız da aşağıda ki gibi iletişim formuna ait kodların tamamını göreceksiniz.
<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Yukarıda ki kod içinde kırmızı olan kodları tamamen silin ve blogger siteniz iletişim formunu algılayacak ancak sidebarda gadget olarak gözükmeyecektir.Sonraki adım sabit bir iletişim sayfası oluşturarak iletişim formunu burada göstermek olacak.
3.ADIM:
Sıra sayfayı oluşturma geldi.Sayfalar > Yeni Sayfa > Boş Sayfa yolunu takip ederek yeni bir sayfa oluşturun ve sayfa başlığına İletişim yazın. Daha sonra sol üst taraftaki Oluştur / HTML sekmelerinde HTML sekmesine geçerek aşağıdaki kodları buraya 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>
Şablon önizleme yaparak sorun yoksa ve iletişim formu gözüktüyse şablonunuzu kaydedin.
4.ADIM:
Sırada iletşim formuna biraz stil vermek var. Şablon > HTML’yi Düzenle yolunu takip ettikten sonra <b:skin><![CDATA ile ]]></b:skin> kodları arasında bir yere <b:skin><
Bizi Takip Edin
Pinterest Facebook Twitter
© by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.
Yorum Gönder Blogger Facebook