Blogger İletişim Formunu Sabit Sayfaya Ekleme

Resim-1:Blogger İletişim Formunu Sabit Sayfaya Ekleme

Çok öncelerden eklenen Bloger'a ait iletişim formu,sadece gatget olarak ekleniliyordu.Ancak belirli düzenlemeler ile iletişim formunu sabit sayfaya ekleyebiliriz.

Nasıl mı Eklenir?

• Blogger panelimizden Yerleşim > Gatget ekle yolunu izleyelim ve "Diğer Gatgetler" kısmına tıklayıp İletişim formunu ekleyelim.
• Sonrasında Şablon > Html'yi düzenle kısmından Widget’a Atla > ContactForm1 diyerek iletişim formuna ait kodların olduğu bölüme gelelim.
• Buradaki ▶ ikonuna tıklayarak kodları genişletelim.

Bu bölümde alttaki kodları görmüş olmanız lazım.

<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'> 
    <b:includable id='main'> 
  <b:if cond='data:title != &quot;&quot;'> 
    <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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/> 
        <p/> 
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/> 
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/> 
        </div> 
      </form> 
    </div> 
  </div> 
  <b:include name='quickedit'/> 
</b:includable> 
  </b:widget>

Burada kırmızı renkle gösterdiğim kodların tamamını silerseniz blogunuz iletişim formunu algılayacak ancak sidebarda gadget olarak gözükmeyecektir.İşlemimiz bu kadardı,alttaki iletişim formu kodunu sayfalar bölümüne Html olarak ekliyebilirsiniz.

<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>

Şimdi ise isterseniz iletişim formunuza stil verelim.Kumanda panelimizden Şablon > Html'yi Düzenle yolunu izleyerek ]]></b:skin> kodunu aratalım(ctrl+f) ve hemen üstüne aşağıdaki kodu ekleyelim.

    /* Malik Can Balaban iletişim formu Stil */
    .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;
    }
    /* Malik Can Balaban iletişim formu Stil */

Eğer bir sorununuz olursa yorum yapabilirsiniz.