Blogger İletişim Formunu Sabit Sayfaya Ekleme

Eminim birçoğunuz bloggerin geçenlerde duyurduğu iletişim formu gadgeti hakkında bilgi sahibisinizdir. Bu, sistemin hızlı bir şekilde geliştiğinin ve gelişmeleri takip eden kullanıcı sayısının artmasının bir sonucu. Her neyse yayınlanan bu gadget blog sayfanızın sidebar denilen diğer adıyla kenar çubuğu kısmına panelden kolayca eklenebiliyor ve isim, mail, mesaj gibi bilgilerinizi alarak blog sahibine pratik şekilde mesaj göndermenize yarıyor.

Bende kendi iletişim sayfamda bu gadgeti kullanıyorum. Yalnız sabit sayfaya bu özelliği eklemek kenar çubuğuna eklemek kadar kolay değil bunun için 1-2 işlem daha yapmanız gerekiyor.
Aşağıdaki adımları takip ederek sizlerde blogunuzdaki sabit sayfalara iletişim gadgetini kolayca ekleyebilirsiniz.

İletişim formu sabit sayfaya nasıl eklenir?

› Blogger panelini açın - Gadgeti eklemek istediğiniz bloga tıklayın - Sol menüden yerleşim kısmına gelin - Gadget ekle deyin, aşağıdaki gibi popup bir pencere açılacak.


› İletişim Formu Yeni! ögesini seçip biraz bekledikten sonra açılan yeni sayfadaki Kaydet butonuna tıklayın ve gadgeti ekleyin.

Bu kısım iletişim formunun blogla bağlantısını sağlamaktan ibaretti. Direk olarak gadget kodlarını sabit sayfaya eklediğimizde form görüntüleniyor ancak etkin olmuyordu. Bundan sonraki adımda bağlantısını sağlamış olduğumuz formun bir kısım kodlarını kullanarak gadgeti sabit sayfada çalıştıracağız.

› Şimdi tekrar kumanda paneline gelerek Blog ➜ Şablon ➜ Html'yi Düzenle yolunu izleyin.
› Açılan kod sayfasında Şablonu Kaydet butonunun yanındaki Widget'a Atla butonuna tıklayın, ContactForm1 seçin.


Daha sonra aşağıdaki resimde olduğu gibi <b:includable id='main'> ile </b:includable> kodları arasındaki tüm kodları silin.
Sıkıştırılmış kodları yanlarındaki ▶ işaretine tıklayarak genişletebilirsiniz.


Şablonu kaydet deyip çıkın.

› Daha sonra Sayfalar ➜ Yeni Sayfa ➜ Boş Sayfa yolunu takip ederek bir sabit sayfa oluşturun ve Html kısmına aşağıdaki kodları yapıştırın.

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
İsim *
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-Posta *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Mesaj*
<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" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
<style>
.contact-form-widget{width:350px;max-width:300%;padding:10px}
.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:350px}
.contact-form-button-submit{width:100px;height:28px}
#ContactForm1_contact-form-email-message{width:350px;border-radius:4px;margin-bottom:10px;padding:15px 10px 15px 5px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:250px;height:30px;border-radius:4px;margin-bottom:10px;padding-left:5px}
</style>

Sayfa ismini de belirleyip Yayınla dedikten sonra iletişim formunuz aktif olacaktır. Önizleme için linke tıklayabilirsiniz.

Hit Adam