Blogger İletişim Sayfası Oluşturma

Merhaba arkadaşlar. Uzun zaman önce Blogger'a iletişim widgeti gelmiştir. Widgeti her hangi bir yere koyarak her sayfanın istenilen bir bölümünde iletişim formu görünmekteydi. Blogger ekibi tarafından yapılmış offical bir eklentidir. Bu yazımda sizlerle bu iletişim widgetini sabit bir sayfada nasıl gösterebiliriz onu anlatacağım. Hazırsanız başlayalım.

1) İlk önce iletişim formu ekleyeceğimiz blogu seçiyoruz, YERLEŞİM > GADGET EKLE > DİĞER GADGETLER > İLETİŞİM FORMU artıya basarak gadgeti ekliyoruz.

İletişim Sayfası Oluşturma

2) Şimdi iletişim formunun kodlarını silmemiz gerekiyor. ŞABLON > HTML'Yİ DÜZENLE > WİDGET ATLA > ContactForm1 diyerek kodlara gidiyoruz. Kodları genişletiyoruz aşağıda taralı boyanmış alandaki kodları seçip siliyoruz. 

İletişim Sayfası Oluşturma

3) Bundan sonra iletişim formunu eklemeye geldik. SAYFALAR > YENİ SAYFA diyerek iletişim sayfamızı oluşturuyoruz. HTML alanını seçerek aşağıdaki kodları kopyalayın ve sayfaya yapıştırıp yayınlayı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> <br />
        <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) Son olarak css kodlarımızı ekleyerek formu düzenliyoruz. Tekrar ŞABLON > HTML'Yİ DÜZENLE diyoruz <b:skin><![CDATA aratıyoruz ve altına aşağıdaki kodları ekliyoruz.

.contact-form-widget { 
width: 500px; 
max-width: 100%; 
margin: 0 auto; 
padding: 10px;  
color: #000;  
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; 
box-shadow:0 1px 4px rgba(0, 0, 0, 0.25);
border:1px solid #fff;
}
.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; 
} 
İşlem bu kadardır arkadaşlar, yapamayan olursa yorum yaparak bildirebilir her türlü yardımcı olmaya çalışırım.

Yorumlar