Profesyonel İletişim Sayfası

Yapacağımız İletişim Sayfasının Önizlemesi

1. İlk olarak Blogger yönetim paneline gidelim. Düzen > Gadget Ekle > İletişim Formu ekleyelim.
2. Tema > Özelleştir'in hemen yanındaki aşağı yönlü oka tıklayıp HTML'yi düzenle diyelim.
3. Karşımıza gelen tema kodlarının herhangi bir boşluğuna sol tıklayıp CTRL+F yapalım.
4. Aşağıdaki kodlardan da görülen ContactForm aratıp ilgili kodlara ulaştığımızda alttaki beyaz ile renklendirilmiş kodları silelim. Daha sonra sağ üstteki kaydet butonuyla kaydedip blogger yönetim ekranına geri dönelim.

 

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

5. Belirtilen beyaz kodları sildiysek eğer sonraki adıma geçebiliriz. Blogger yönetim panelinden Sayfalar kısmına girelim.

6. Sol üstten Yeni Sayfa diyelim ve açılan pencerede sol üstte bulunan kalem simgesine tıklayarak HTML görünümü diyelim. Daha sonra alttaki kodu yapıştıralım ve Güncelle diyelim. 

<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Adınız </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
<br />
<span><i class="fa fa-envelope-o"></i> Mail Adresiniz </span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
<br />
<span><i class="fa fa-keyboard-o"></i> Mesajınız </span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />  <br />
<div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br />
<style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>

7. Güncelle'nin altında yer alan Seçenekler sekmesine tıklayalım ve "Okuyucu yorumlarına izin verme, mevcut olanı gizle" diyip Güncelle diyelim. İşte bu kadar :)

Eğer siz de bu harika görünümlü profesyonel blogger iletişim sayfasını yapmayı başardıysanız aşağıdaki yorumlar kısmından bir teşekkürünüzü isterim :) Problem yaşarsanız da lütfen sorununuzu belirtin.