Yeni Nesil Blog İletişim Sayfası Oluşturma

3/08/2016
Bugün sizlerle paylaşmış olduğum blog yeni nesil iletişim sayfasının bazı özellikleri üzerinde durarak blogunuza olan faydalarından bahsedeceğim. Blogunuzu oluşturdunuz her şey tamam ve sıra iletişim sayfasına geldi. Bir çok sitede bulunan iletişim sayfa eklentilerinin CSS ve HTML eklentileri ile blogunuz hem kod oranı hem de yavaşlamaya başlamaktadır. Ne kadar çok eklenti eklerseniz sayfanızın açılış hızında bir o kadar da yavaşlama olacaktır.

Yeni Nesil Blog İletişim Sayfası Oluşturma

Şimdi sizinle paylaşacak olduğum kodlar ile şablon içerisine herhangi bir kod eklemeden iletişim sayfamızı oluşturacağız.

1- Öncelikle blogger kumandan paneline giderek iletişim formu gadgetini blogunuzun sidebar kısmına ekleyin. Yani Yerleşim > Gadget Ekle > Diğer Gadgetlar yolunu takip ederek listeden İletişim Formu gadgetini seçiyoruz. 

2- İletişim sayfası oluşturmak için blogunuzun kumanda panelinden Şablon>HTML üzenle CTRL+F yardımıyla ContactForm1 kodunu buluyoruz ve aşağıdaki kodda belirttiğim renkli kodları silin.
<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>

3-  İletişim sayfası oluşturmak istediğiniz sayfaya gelerek Sayfalar > Yeni Sayfa > Boş Sayfa aşağıda paylaşmış olduğum kodu resimdeki gibi sayfanın HTML kısmına ekliyoruz.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content" id="############">
<form name="contact-form">
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;">İsim <span style="color: #f56954; font-size: x-small; font-weight: bold;">önemli</span></span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
<br />
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;">Email Adres <span style="color: #f56954; font-size: x-small; font-weight: bold;">önemli</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
<br />
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;">Mesaj <span style="color: #f56954; font-size: x-small; font-weight: bold;">önemli</span></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{width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;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:564px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;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 {width:100%;float:left;background:#fff;color:#666;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:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #D64B25 0%, #D64B25 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#D64B25;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;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;}
</style></div>
</div>

Yeni Nesil Blog İletişim Sayfası Oluşturma

Not: Sarı renk ile belirtmiş olduğum yere blogunuzun yani blogID=609XXXXXXXXXX089'sini ekliyorsunuz ve sayfayı yayınlayın iletişim sayfanız hazır. Güle güle kullanın...

Örnek bir iletişim sayfası görüntülemek için tıklayın.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok