Orjinal Blogger İletişim Formu ile İletişim Sayfası Oluşturma

Bu yazımda blogger'ın kısa zaman önce hizmete sunduğu orjinal blogger iletişim formunu sabit sayfaya nasıl ekleyeceğimizi göstereceğim. Böylece herkezin okuyucularıyla bağlantı kurmaları için bir iletişim sayfası olacak. Blogger bu eklentisini hizmete sunmadan önce kendimiz Google Dökümanları kullanarak iletişim formu oluşturmuştuk. Bu gadgetı sidebar yani blog sayfamızın yan kısımına eklemek oldukça basit. Fakat bunu sabit bir sayfaya eklemek için ek olarak işlemler yapmamız gerekiyor. Tüm blogger kullanıcıları için iletişim formu çok önemli bir yer almaktadır. Bu makalemde blogger iletişim formunu sabit sayfaya eklemeyi göstereceğim.

1. Adım:

Öncelikle Blogger’ın iletişim formu gadgetını blogunuzun sidebarına eklemeniz gerekiyor. Bunun için Blogger kumanda panelinize girdikten sonra Yerleşim > Gadget Ekle > Diğer Gadgetlar yolunu takip ederek listeden İletişim Formu gadgetını seçin.

2. Adım:

İletişim formunun sidebarda olmasını istemediğimiz bu adımda formun gadget olarak görünmemesi için gerekli kod değişikliğini yapacağız. Blogger kumanda paneline girip Şablon > HTML’yi Düzenle yolunu takip ettikten sonra sonra Widget’a Atla > ContactForm1 diyerek iletişim formuna ait kodların olduğu bölüme gelin. Bu bölümdeki kodların sol tarafındaki ► ikonuna tıklayarak kodları genişletin. Genişletme işlemini yaptığınızda iletişim formu gadgetına ait kodlar şu şekilde gözükecektir:

<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ükmeyecek. Sonraki adım sabit bir iletişim sayfası oluşturarak iletişim formunu burada göstermek olacak.

3. Adım:

Sıra sayfayı oluşturma geldi. Sayfalar > Yeni Sayfa > Boş Sayfa yolunu takip ederek yeni bir sayfa oluşturun ve sayfa başlığına İletişim yazın. Daha sonra sol üst taraftaki Oluştur / HTML sekmelerinde HTML sekmese geçerek aşağıdaki kodları buraya yapıştırı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>
        <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>

Önizleme yaptığınızda sorun yoksa ve iletişim formu gözüktüyse sayfayı kaydedebilirsiniz.

4. Adım:

Yukarıda verdiğim kod bloggerin standart orjinal iletişim formuydu. Sidebarınızdan alıp iletişim sayfanıza koyduk. Ama Eğer orjinalini beğenmiyorsanız, isterseniz aşağıda resimlerle gösterdiğim stillerden birini seçip iletişim sayfanıza direk onuda ekleyebilirisiniz.

<style type='text/css'>
#ContactForm1{display:none;}
#contact_wrap{width:321px;height:380px;border-radius:1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#ccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f2f2f2',endColorstr='#cccccc');background-image:linear-gradient(top,#f2f2f20%,#e6e6e650%,#cccccc100%);box-shadow:1px 1px 5px #ccc;margin:auto;padding:25px;}
#contact_wrap h3{color:#e8f3f9;font-family:oswald,Georgia,arial;font-size:20px;font-weight:400;text-align:center;text-shadow:2px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;position:relative;margin:0 -36px 20px;padding:12px;}
#contact_wrap h3:before{content:' ';position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px;}
#contact_wrap h3:after{content:' ';position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px;}
#ContactForm1_contact-form-name{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibu4bE4C938PgViT_AMV1ijJjvpu3EmgIYsK05314ZuaaF9aQygNbB9gHA8A62wYWULdO5CP7Ht1_3kNzDLMlBKG-piu2SETNnlA3khJkKaZOZBFJwL7hdmznvrRIAaG4_NTXYRsjOrPQ/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr6JQc-GWlBWNDq4L3PjGFSb7cb7AHaifRnt-ntV7UXBKPWVK8wBJU-cPlhzILBO5VsB9UZrlntUGJD9YQTQIEgpf2KYVb02Qt9aVuWgm2KU3_lNF1FA68ViHzX__39V49BESQ7KWegLI/s1600/msg2.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email-message{width:270px;height:150px;font-family:Arial, sans-serif;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhqYG2GenQM4uX0N-q6U53rUFMfww5f5KlA9L1QB9eaKUVX7-F9HeLzoVsW5K1KyNLT8yQwMC8WQ0r8YKf5ovyarMGF1EdU3bbwVEMCItcPaTyV_bctq816P6nlJEoC3nuRfXzKu2wFA/s1600/pen.png)no-repeat 10px 10px;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-submit{width:95px;height:30px;float:right;color:#FFF;cursor:pointer;border-radius:4px;text-shadow:1px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;border:1px solid #194f6d;margin:10px 0;padding:0;}
#ContactForm1_contact-form-submit:hover{background:#4c9bc9;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:320px;margin-top:35px;}
</style>
<div id="contact_wrap">
<h3>İletişim</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="İsim" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="E-Posta" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesaj" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<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>
</div>

<style type='text/css'>
.contact-form-widget{width:500px;max-width:100%;background:#E6E7E8;color:#000;border:1px solid #656E75;box-shadow:0 1px 4px rgba(0,0,0,0.25);border-radius:10px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{background:#E6E7E8;color:#000;width:20%;max-width:20%;margin:0;border:1px solid #656E75;}
.contact-form-button-submit:hover{background:#679EC9;color:#fff;border:1px solid #FAFAFA;}
</style>
<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>

<style type='text/css'>
.contact-form-widget{width:75%;max-width:100%;background:#5F8CB0;color:#fff;border:1px solid #5F8CB0;border-radius:1px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{height:40px;color:#5F8CB0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPioLEWeCipTYlWMhgC49jcYHqvgDku0k7Eb7_ZnBuaKMOLZ6c2wJJuojVOq2lOrTJYKZWkIW7Y-EoKg5bGekmmPJOtyXQNZGUIFKqYBzj7LhwoVR8SGJfZ9W-fctlFLTa0w1m33TmLKtM/s1600/send_message_40.png) #fff 5px center no-repeat;padding-left:44px;}
.contact-form-button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPioLEWeCipTYlWMhgC49jcYHqvgDku0k7Eb7_ZnBuaKMOLZ6c2wJJuojVOq2lOrTJYKZWkIW7Y-EoKg5bGekmmPJOtyXQNZGUIFKqYBzj7LhwoVR8SGJfZ9W-fctlFLTa0w1m33TmLKtM/s1600/send_message_40.png) #357AE8 5px center no-repeat;border:1px solid #404040;color:#FFF;border-color:#2F5BB7;}
</style>
<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>

<style type='text/css'>
.contact-form-widget{margin:0;width:75%;max-width:100%;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:220px;width:100%;font-weight:700;}
.contact-form-name{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4l_sM6syOzRtKmMBtiAIN_CuPmZ38NiMLhi7oEg-MQEyCqwDR73A7MTvpPCs-Q2e8Sk4UlM3heWftWa2FO1PyTZVcucDclYzokjhvGRXjOR-c6dBo_P_F-p_53SyxJxfREJkr16xyE40/s320/name.png) no-repeat 7px 8px;background-color:#FFF;border:1px solid #ddd;box-sizing:border-box;color:#A0A0A0;display:inline-block;font-family:Arial,sans-serif;font-size:12px;font-weight:700;height:24px;vertical-align:top;margin:5px 0 0;padding:5px 15px 5px 28px;}
.contact-form-email{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBEHU7e2eLo6g6-sILs-5bDzJZP_ngtjhD1nsqKAKK2cYQOTT-GoXDH4SZaFJ81v3lZMrY_BIvNw2skgxYSDI7y_nlr0Wt21XVDsQei5eLKavoJiHLkD5mc152cIis7i_D5msI8sSG_8/s320/email.png) no-repeat 7px 10px;background-color:#FFF;border:1px solid #ddd;box-sizing:border-box;color:#A0A0A0;display:inline-block;font-family:Arial,sans-serif;font-size:12px;font-weight:700;height:24px;vertical-align:top;margin:5px 0 0;padding:5px 15px 5px 28px;}
.contact-form-email:hover,.contact-form-name:hover{border:1px solid #bebebe;box-shadow:0 1px 2px rgba(5,95,255,.1);padding:5px 15px 5px 28px;}
.contact-form-email-message:hover{border:1px solid #bebebe;box-shadow:0 1px 2px rgba(5,95,255,.1);padding:10px;}
.contact-form-email-message{background:#FFF;background-color:#FFF;border:1px solid #ddd;box-sizing:border-box;color:#A0A0A0;display:inline-block;font-family:arial;font-size:12px;vertical-align:top;max-width:350px!important;height:150px;border-radius:4px;margin:5px 0 0;padding:10px;}
.contact-form-button{height:32px;line-height:28px;font-weight:700;border:none;zoom:1;display:inline;vertical-align:baseline;outline:none;cursor:pointer;text-align:center;text-decoration:none;font:14px/100% Arial, Helvetica, sans-serif;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2);margin:0 2px;padding:.5em 2em .55em;}
.contact-form-button:hover{text-decoration:none;}
.contact-form-button:active{position:relative;top:1px;}
.MEF-button-color{color:#fef4e9;border:solid 1px #da7c0c;background:-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background: -moz-linear-gradient(top, #faa51a, #f47a20);;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');}
.MEF-button-color:hover{background:-moz-linear-gradient(top, #f88e11, #f06015);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');border-color:#F47C20!important;}
</style>
<!--[if IE 9]>
<style type='text/css'>
.contact-form-name{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4l_sM6syOzRtKmMBtiAIN_CuPmZ38NiMLhi7oEg-MQEyCqwDR73A7MTvpPCs-Q2e8Sk4UlM3heWftWa2FO1PyTZVcucDclYzokjhvGRXjOR-c6dBo_P_F-p_53SyxJxfREJkr16xyE40/s320/name.png) no-repeat 7px 0;}
.contact-form-email{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBEHU7e2eLo6g6-sILs-5bDzJZP_ngtjhD1nsqKAKK2cYQOTT-GoXDH4SZaFJ81v3lZMrY_BIvNw2skgxYSDI7y_nlr0Wt21XVDsQei5eLKavoJiHLkD5mc152cIis7i_D5msI8sSG_8/s320/email.png) no-repeat 7px 6px;}
</style>
<![endif]-->  
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="&#304;sim" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&#304;sim&quot;;}' onfocus='if (this.value == &quot;&#304;sim&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="E-Posta"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Posta&quot;;}' onfocus='if (this.value == &quot;E-Posta&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Mesajınızı bırakın...'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Mesajınızı bırakın...&quot;;}' onfocus='if (this.value == &quot;Mesajınızı bırakın...&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit MEF-button-color' type='reset' value='Temizle'/> 
<input class='contact-form-button contact-form-button-submit MEF-button-color' id='ContactForm1_contact-form-submit' type='button' value='G&#246;nder'/>
<p></p>
<div style='text-align: center; max-width: 250px; width: 100%'>
<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>
</div>
</form>
</div>

Şablonu kaydedin ve Blogger’ın resmi iletişim formunu kullanarak oluşturduğunuz iletişim sayfanız hazır.

Blogger resmi iletişim formu önizleme

Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...