Blogger İletişim Formunu Sabit Sayfaya Eklemek

Kendinize ait bir iletişim sayfanızın olmasını istiyorsanız aşağıdaki adımları izleyerek kolayca yapabilirsiniz.
1. Adım
İlk olarak blogger'ın iletişim formunu blogunuzun sidebar, footer vs kısmına eklemelisiniz. Bunu Yerleşim > Gadget Ekle > Diğer Gadgetlar > İletişim Formu yolunu takip ederek yapabilirsiniz.

2. Adım
İletişim formunun blogumuzun sidebar, footer vs gibi kısımlarında görünmemesi için Tema > HTML'yi Düzenle bölümüne girip ister aşağıdaki kodu CTRL + F komutuyla bulabilirsiniz. İsterseniz de Widget’a Atla > ContactForm1 yolunu takip ederek ulaşabilirsiniz.

<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. Adım
Yukarıda kırmızı renkle işaretlediğim kısımları siliyoruz.

4. Adım
Blogger > Sayfalar > Yeni Sayfa yolunu takip ederek yeni sayfa oluşturalım. Sayfayı ilk oluştururken sayfa başlığında Türkçe karakter kullanmamaya özen gösterelim. Daha sonra değiştirirsiniz. İletişim yerine iletisim yazalım. Daha sonra sayfa başlığını isterseniz kaldırabilirsiniz isterseniz de değiştirebilirsiniz. Sayfanızın adresi http://blogadresi.blogspot.com.tr/p/iletisim.html gibi olsun. Oluşturduğunuz sayfada HTML bölümüne gelip aşağıdaki kodları yapıştırın.

<style type="text/css">
#message-bg {
 background: #fffeef;
 color: #585858;
 padding: 10px;
 text-align: center;
 border: 1px solid #F3F3F3;
}
div#blog-supporter_contct_form {
 padding: 0px 0px 0 0px;
 border-radius: 0px;
 color: #1D1D1D;
 font-size: 15px;
 font-weight: bold;
 background:none;
 font-family: sans-serif;
}
div#blog-supporter_contct_form .wrap-me {
 margin: 0 auto;
 display: block;
 padding: 30px 20px;
 background: #f3f3f3;
 border-radius: 0px;
 max-width: 632px;
 width: 632px !important;
 border-top: 2px solid #d8d8d8;
 border-left: 1px solid #d8d8d8;
 border-right: 1px solid #d8d8d8;
 border-bottom: 1px solid #d8d8d8;
 box-sizing: border-box;
}
div#blog-supporter_contct_form .wrap-me:before {
 content:'\f0e0';
 position: absolute;
 font-family: FontAwesome;
 font-weight: blod;
 margin-top: -75px;
 margin-left: -35px;
 left: 50%;
 display: inline-block;
 font-size: 48px;
  width: 80px;
 height: 80px;
 background: #f9f9f9;
  border-radius: 50px;
 text-align: center;
 color: #999;
 box-sizing: border-box;
 border: 5px solid #d8d8d8;
  line-height: 70px;
}
input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
 padding: 6px;
 margin-top: 6px !important;
 box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
 max-width: 100%;
 height: 45px;
 width: 100%;
 border: 1px solid #D2D2D2;
 border-radius: 0px;
 line-height: 1em;
 min-height: 31px;
 background: #fff;
 font-family: sans-serif;
 margin-bottom: 15px;
}
.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
 padding: 6px;
 margin-top: 6px !important;
 box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
 max-width: 100%;
 height: 200px;
 width: 100%;
 border: 1px solid #D2D2D2;
 border-radius: 0px;
 color: #1d1d1d;
 line-height: 1em;
 min-height: 80px;
 background: #fff;
 font-family: sans-serif;
 margin-bottom: 10px;
}
/*------[Focus]-------------------*/
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
 outline: none;
 background: #FFFFFF !important;
 color: #444;
 border-color: rgb(236, 235, 235) !important;
 box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
 transition: all 0.3s ease-in-out !important;
}
/*----[Submit button style]-------------*/
.contact-form-button-submit:hover {
 color: #FFFFFF;
 background: #777 !important;
}
.contact-form-button-submit {
 background: #444;
 display: table;
 font-size: 17px;
 margin: 0 !important;
 border-radius: 0px !important;
 max-width: 100%;
 width: 100%;
 min-width: 100%;
 height: 40px;
 float: center;
 letter-spacing: 0.5px;
 font-family: sans-serif;
 font-weight: normal;
 cursor: pointer;
 outline: none!important;
 color: #FFFFFF;
 border: 0px solid #fff !important;
 text-align: center;
 padding: 0px 0px 0px 15px;
 text-transform: capitalize;
 transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
}
/*----[Submit button on Focus]------------------*/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
 border-color: #FFFFFF;
 box-shadow: none !important;
}
/*---[Error message]---------------------*/
.contact-form-error-message-with-border .contact-form-success-message {
 background: #f9edbe;
 border: 0px solid #d8d8d8;
 bottom: 0;
 box-shadow: 0 2px 4px rgba(0,0,0,.2);
 color: #666;
  font-size: 12px;
 font-weight: bold;
 padding-bottom: 10px;
 line-height: 19px;
 margin-left: 0;
 opacity: 1;
 position: static;
 text-align: center;
}
/*---[Submit Button On Success Message]---------*/
.contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
 opacity: 0.9;
}
/*----[Success Message]---------*/
.contact-form-error-message-with-border {
 background: #f3f3f3;
 border: 1px solid #d8d8d8;
 border-radius: 0px !important;
 bottom: 0;
 box-shadow: none;
 color: #313131;
 font-size: 20px;
 font-weight: normal;
 line-height: 35px;
 margin-left: 0;
  opacity: 1;
 position: static;
 text-align: center;
 height: 35px;
 margin-top: 45px;
}
.contact-form-cross {
 height: 14px;
 margin: 5px;
 vertical-align: -8.5%;
 float: right;
 width: 14px;
 border-radius: 50px;
 border: 0 !important;
 cursor: pointer;
}
.contact-form-success-message-with-border {
 font-weight: normal;
 background-color: #f3f3f3;
 border: 1px solid #d8d8d8;
 color: #313131;
 line-height: 35px;
 margin-left: 0;
 font-size: 20px;
 opacity: 1;
 position: static;
 text-align: center;
 height: 35px;
 margin-top: 45px;
}
/* Extra Stuff */
div#blog-supporter_contct_form span.name-bg {
 background-color: none; #f5fce5;
  }
div#blog-supporter_contct_form span.email-bg {
 background-color: none; #edfaf2;
}
div#blog-supporter_contct_form span.name-bg, div#blog-supporter_contct_form span.email-bg {
 display: inline-block;
 max-width: 550px;
 line-height: 21px;
 width: 100%;
 color: #696969;
 padding: 3px 5px;
 margin: 0px 0px 0px;
 box-sizing: border-box;
 height: 30px;
 border: 0px solid #E4E0E0;
 padding-left: 39px;
}
div#blog-supporter_contct_form span.name-bg:before {
 content: '\f007';
 background-color: #286ab1;
}
div#blog-supporter_contct_form span.email-bg:before {
 content: '\f0e0 ';
 background-color: #286ab1;
}
div#blog-supporter_contct_form span.name-bg:before, div#blog-supporter_contct_form span.email-bg:before, div#blog-supporter_contct_form span.message-bg:before {
 font-family: FontAwesome;
 text-align: center;
 margin: -4px 0 0px 0px;
 font-weight: normal;
 padding: 0;
 line-height: 27px;
 width: 28px;
 height: 28px;
 display: table;
 position: absolute;
 margin-left: -40px !important;
 border: 0px solid rgba(0, 0, 0, 0.1);
 border-radius: 100px;
 border-right: 0 !important;
 color: #FFFFFF;
}
div#blog-supporter_contct_form span.message-bg {
 background-color: none; #EBFFE8;
 display: inline-block;
 max-width: 550px;
 height: 30px;
 line-height: 21px;
 width: 100%;
 border: 0px solid #E4E0E0;
 color: #696969;
 padding: 3px 5px;
 box-sizing: border-box;
 padding-left: 39px;
 margin: 0px 0px 4px;
}
div#blog-supporter_contct_form span.message-bg:before {
 content: '\f044';
 background-color: #286ab1;
}
div#blog-supporter_contct_form span.send-bg {
 display: inline-block;
 background: #f8fff7;
 float: left;
 max-width: 40%;
 height: 40px;
 width: 100%;
 margin-top: 15px;
 transition: all 0.4s ease-in-out !important;
}
div#blog-supporter_contct_form span.send-bg::before {
 content: '\f1d8';
 height: 40px;
}
div#blog-supporter_contct_form span.send-bg::before, div#blog-supporter_contct_form span.clear-bg:before {
 font-family: FontAwesome;
 background-color: #286ab1;
 text-align: center;
 font-weight: normal;
 margin: 0px;
 padding: 0px;
 line-height:40px;
 height: 40px;
 width: 40px;
 position: absolute;
 border: 0px solid #fff;
 border-radius: 0px 0px 0px 2px!important;
 display: inline-block;
 border-right: 0 !important;
 color: #FFFFFF;
}
div#blog-supporter_contct_form span.clear-bg {
 display: inline-block;
 float: right;
 margin-top: 15px;
 height: 40px;
 border-radius: 0px!important;
 max-width: 40%;
 width: 100%;
}
div#blog-supporter_contct_form span.clear-bg:before {
 content: '\f021';
 height: 40px;
 }
input.contact-form-button.contact-form-button-submit.clear-button:hover {
 background-color: #777 !important;
 height: 40px;
}
div#blog-supporter_contct_form .clear-button {
 color: #FFFFFF;
 border: 0px solid #FFF !important;
 background-color: #444444;
 border-radius: 2px!important;
 max-width: 100%;
 width: 100%;
 min-width: 100%;
 float: right;
 display: table;
 height: 40px;
}
div#ContactForm1 {display: none !important;}
</style>

<div id="blog-supporter_contct_form">
<div class="wrap-me">
<form name="contact-form">
<span class="name-bg">Adınız</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Mustafa Aydın" size="30" type="text" value="" /><br />
<br />
<span class="email-bg">Eposta Adresiniz <span style="color: grey;"><b>*</b></span></span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="birisi@example.com" size="30" type="text" value="" /><br />
<br />
<span class="message-bg">Mesajınız <span style="color: grey;"><b>*</b></span></span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesajınızı buraya yazın..." rows="5"></textarea><br />
<br />
<span class="send-bg"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gönder" /></span>
<span class="clear-bg"><input class="contact-form-button contact-form-button-submit clear-button" type="reset" value="Temizle" /></span>
<br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
<br/>
</form>
</div>
</div>

5. Adım
Mavi renk ile işaretlediğim yerleri kendinize göre özelleştirin ve kullanmaya başlayın.

Daha iyi bloglar için...

Önizleme

Adınız


Eposta Adresiniz *


Mesajınız *