Blogger İletişim Sayfası Oluşturma 3 Farklı Tasarım

Blogger İletişim Sayfası Oluşturmanın üç farklı yolu ile blogunuza uygun bir tasarım ile  Blogger Sayfalara İletişim Formu nasıl Oluşturulur? Gadget aracılığı ve iletişim formuna ait kodları uygun alana yerleştirerek basit bir şekilde Blogger İletişim Sayfası Oluşturma hakkında detaylı bilgi bulacaksınız.

Blogger İletişim sayfasına ekleyeceğiniz iletişim formu ile potansiyel müşterinize veya Ziyaretçilerinize sizinle iletişim kurmaları için şık iletişim formu oluşturabileceksiniz.

İnsanların sizinle iletişim kurabilmeleri önemli ve şık görünüme sahip iletişim sayfası oluşturarak bu sorunu gidermeniz önemlidir. Blogger iletişim sayfası oluşturma ve sayfalara iletişim formu nasıl eklenir adım adım anlatıyor olacağız.

Wordpress vb. tarzı hazır cms sistemlerde iletişim sayfası oluşturmak için eklentiler aracılığı ile kolay bir şekilde iletişim sayfası oluşturabilir. Blogger için iletişim sayfası oluşturmak eklenti kurmak kadar kolay olacaktır.

Google Adsense başvurularında hakkımızda sayfası, gizlilik politikası ve iletişim sayfası önem arz eden sayfalar arasında yer alıyor. Adsense başvurunuzun kabul edilmesi için iletişim sayfası oluşturmanız gerekli ve önemli sayfalar arasındadır.

Adsense onay almak için çalışan site sahipleri, sitelerine iletişim sayfası eklemesi gerektiği biliniyor. Blogger tabanlı siteler için blogger tema yükledikten sonra varsayılan olarak iletişim sayfası oluşturulmuyor kendimiz oluşturmalısınız.

Blogger iletişim sayfası oluşturmayı gayet basite indirgedik. Herhangi kod bilgisine sahip olmanıza gerek yoktur. Sabit sayfalara veya temanızın uygun alanına hazır kodları ekleyerek bir iletişim sayfası oluşturabileceksiniz.

Blogger iletişim sayfası oluşturmak basit blogger kullanımından anlamanız gereklidir. Statik sayfalara iletişim formu nasıl eklenir detaylı bir şekilde anlatmaya çalıştık. Blogger için iletişim sayfası oluşturabileceğiniz veya ekleyebileceğiniz yöntemlerden istediğinizi kullanabilirsiniz.

Sizin için 3 farklı tasarıma sahip iletişim formu örneğinden istediğinizi ekleyebilirsiniz. Blogger iletişim sayfası oluşturmak veya sayfalara iletişim formu eklemek isteyenler için blogger yapısını kullanan siteler için 3 farklı iletişim sayfası oluşturma yöntemi ile sitenize uygun formu ekleyebilirsiniz.

İletişim sayfası oluşturmanız için herhangi bir kod veya yazılım dili bilmenize gerek yoktur. Sadece biraz html yapısı ne olduğu veya kodları nereye ekleyebileceğinizi bilmeniz yeterlidir. Hazır kodları nereye ekleyebileceğinizi de sizinle paylaşıyor olacağız.

İletişim formunu sayfalara ekleyebilmeniz için 3 kısa adımla tamamlayabileceksiniz. 1. adımda iletişim gagdetini eklemeniz 2. adımda ise iletişim formunu kurmak istediğiniz sayfaya kodları eklemek ve 3. ve son adımda eklediğimiz iletişim gadgetini gizlemek olacaktır.

Üç farklı tasarıma sahip formlar iki kod yapısından oluşuyor birinci kod iletişim gadgetini ana sayfada gizlemenize ikinci kod bloğu ise sabit sayfalara iletişim formunu eklemenize yaramaktadır.

İletişim Formu Gadgeti İle  Blogger İletişim Sayfası Oluşturma

Sabit sayfada iletişim formu eklemek istediğiniz blogger hesabınıza giriş yapın düzen (Yerleşim) bölümünde Gadget ekleye basıp iletişim formu gadgeti eklenmesi yapılması gerekmektedir.

Daha sonra Tema >> HTML'yi düzenlemeyi adımları takip edip bu kodu bulmanız lazım ]]></b:skin> CTRL+F Yaparak Kolayca bulabilirsiniz. Kodun hemen üstüne aşağıdaki kodu yapıştırın. Aşağıdaki kod İletişim Gadgetini ana sayfa da gizlemeye yarıyor.

.sidebar .widget.ContactForm {

    display: none!important;
}

Daha sonra aşağıdaki kodu Eklemek istediğiniz iletişim sayfasına Html Olarak Eklenmesi gerekmektedir. Oluşturduğunuz iletişim sayfasında html bölümüne tıklayın ve kodları ekleyin. 

  <style>
#contact{

  background-color:#fff;

  margin:30px 0 !important
}
#contact .contact-form-widget{

  max-width:100% !important
}
#contact .contact-form-name,#contact
  .contact-form-email,#contact .contact-form-email-message{

  background-color:#FFF;

  border:1px solid #eee;

  border-radius:3px;

  padding:10px;

  margin-bottom:10px !important;

  max-width:100% !important
}
#contact .contact-form-name{

  width:47.7%;

  height:50px
}
#contact .contact-form-email{

  width:49.7%;

  height:50px
}
#contact .contact-form-email-message{

  height:150px
}
#contact .contact-form-button-submit{

  max-width:100%;

  width:100%;

  z-index:0;

  margin:4px 0 0;

  padding:10px !important;

  text-align:center;

  cursor:pointer;

  background:#27ae60;

  border:0;

  height:auto;

  -webkit-border-radius:2px;

  -moz-border-radius:2px;

  -ms-border-radius:2px;

  -o-border-radius:2px;

  border-radius:2px;

  text-transform:uppercase;

  -webkit-transition:all .2s ease-out;

  -moz-transition:all .2s ease-out;

  -o-transition:all .2s ease-out;

  -ms-transition:all .2s ease-out;

  transition:all .2s ease-out;

  color:#FFF
}
#contact .contact-form-button-submit:hover{

  background:#2c3e50
}
#contact .contact-form-email:focus,#contact
  .contact-form-name:focus,#contact .contact-form-email-message:focus{

  box-shadow:none !important
}
</style>
<div
  class="contact-form">

<div class="contact section"
  id="contact" style="display: block;">

<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" placeholder="İsim" size="30"
  type="text" value="" />


  <input class="contact-form-email" id="ContactForm1_contact-form-email"
  name="email" placeholder="Email" size="30" type="text" value="" />


  <textarea class="contact-form-email-message" cols="25"
  id="ContactForm1_contact-form-email-message" name="email-message"
  placeholder="Mesaj" rows="5"></textarea>


  <input class="contact-form-button contact-form-button-submit"
  id="ContactForm1_contact-form-submit" type="button" value="Send" />


  <br />

<div style="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>

</form>

</div>

</div>

</div>

</div>

</div>

Tebrikler Blogger iletişim sayfası oluşturmayı başardınız. İşlem bu kadar basit.

Sabit (Statik) Sayfalarda Blogger İletişim Formu Oluşturma

Blogger Sabit (Statik) sayfalarda iletişim formu gösterebilmek için İletişim formu gadgeti eklemeniz gerekmektedir. Daha sonra ki adımda ise aşağıdaki yazı tipini temamıza eklemeniz lazım.

Eğer aşağıda belirtilen yazı tipi temanız da mevcut ise eklemenize gerek yoktur. Bunu belirtmemizde ki amaç ise olur da blogunuzda bu yazı tipi kullanılmamış olabilir. Bir çok Blogger (blogspot) Temada bu yazı tipi bulunmakta veya kullanılmaktadır.

Blogger Tema düzenleme bölümünde </head> bölümünün hemen üstüne Aşağıdaki kodu ekleyin.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Daha sonra ki Adımda ise  </style> veya ]]></b:skin> kodunu bulun Kodu hemen bulmak için Ctrl+ F kombinasyonundan faydalanabilirsiniz. Kodların hemen üstüne aşağıdaki kodu yapıştırın ve temanızı kaydedin.

    #ContactForm1 {

    display: none;
}
  

    #ContactForm1_contact-form-name, #ContactForm1_contact-form-email {

    width: 300px;

    height: auto;

    margin: 10px auto;

    padding: 10px;

    background: #fdfdfd;

    color: #666;

    border: 1px dashed #ddd;

    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message
    {

    width: 450px;

    height: 175px;

    margin: 10px auto;

    padding: 10px;

    background: #fdfdfd;

    color: #666;

    font-family: 'Roboto',sans-serif;

    border: 1px dashed #ddd;

    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus,
    #ContactForm1_contact-form-email:focus,
    #ContactForm1_contact-form-email-message:focus {

    background: #fff;

    outline: none;

    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit
    {

    font-family: 'Roboto';

    font-size: 15px;

    width: 101px;

    height: 35px;

    float: left;

    color: #fff;

    padding: 0;

    margin: 10px 0 3px 0;

    cursor: pointer;

    background: #aaa;

    border: none;

    border-radius: 2px;

    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover
    {

    background: #f8a82a;
}

#ContactForm1_contact-form-error-message,
    #ContactForm1_contact-form-success-message {

    width: 450px;

    margin-top: 35px;
}
  

Bir sonraki aşama ise Blogger iletişim formunu eklemek istediğiniz sayfaya aşağıdaki kodu html olarak eklemeniz lazım.Kodun Düzgün çalışması için seçenekler bölümünde satır sonu enter olarak ayarlayın.

Kullanmaya başlamadan önceki son aşamada ise aşağıdaki kodu html olarak Sayfaya ekleyin.

  <form name="contact-form">
<span style="font-family: Helvetica
  Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i>
  İsim</span>
<input id="ContactForm1_contact-form-name"
  name="name" size="30" type="text" value="" /> 

<span
  style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i
  class="fa fa-envelope"></i> Email <span style="color: red;
  font-weight: bolder;">*</span></span> 
<input
  id="ContactForm1_contact-form-email" name="email" size="30" type="text"
  value="" /> 

<span style="font-family: Helvetica Neue, Arial,
  Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Mesaj
  <span style="color: red; font-weight:
  bolder;">*</span></span>
<textarea cols="25"
  id="ContactForm1_contact-form-email-message" name="email-message"
  rows="5"></textarea> 
<input
  id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
  
<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>

Blogger İletişim Sayfası Oluşturmanın Son Yolu

Blogunuza iletişim formu Gadgetini ekleyin.Temalar bölümünde html düzenle ve </head> Kodunu bulun aşağıdaki kodu </head> kodunun hemen üstüne ekleyin ve temayı kaydedin. Bu kod eklediğimiz iletişim gadgetini ana sayfada gizlememize yaramaktadır.

    <style type='text/css'>
#ContactForm1,#ContactForm1
    br{display:none}
</style>
    

İletişim Formu eklemek istediğiniz sayfaya html olarak ve satır sonu enter olarak ayarlanması gerekmektedir. Daha sonra ki adımda ise aşağıdaki kodları sayfaya eklemelisiniz. Sayfaya eklediğiniz kodların Html şeklinde eklendiğinden emin olunuz.

    <form name="contact-form">
<div class='formcolumn1'>
<input
    id="ContactForm1_contact-form-name" name="name" placeholder='Ad' size="30"
    type="text" value="" />
</div>
<div
    class='formcolumn2'>
<input id="ContactForm1_contact-form-email"
    name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div
    class='formcolumn3'>
<textarea cols="25"
    id="ContactForm1_contact-form-email-message" name="email-message"
    placeholder='Mesaj' rows="7"></textarea>
</div>
<div
    class='formcolumn4'>
<input class="ripplelink"
    id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
</div>
<div
    style="max-width: 100%; text-align: center; width: 100%;">
<div
    id="ContactForm1_contact-form-error-message">
</div>
<div
    id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
    

    <style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px
    auto;padding:14px;background:#fff;color:#222;border:1px solid
    rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px
    auto;padding:14px;background:#fff;color:#222;border:1px solid
    rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0
    0 0 20px;margin:10px 0 3px
    5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0
    rgba(60,64,67,0.302),0 1px 3px 1px
    rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s
    cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxEpoQPnS6nQmQxFqoitN8HEvuaCY7sOru1xdDr1hRbmwnM8YuhBLKRHafREiYRAa6BFDKfPBHbcTZC8Ywxw58Xp_WmtmQc9XUSpSdVGbF1ahzfeS8-cj3Klt5tmyPD3LwhgCK16i-2I6N/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0
    1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0
    0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media
    only screen and
    (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>/code>

Son olarak aşağıdaki kodu bir önceki kodtan hemen sonra sayfaya eklemeniz ve 7342017194742683056 bulup kendi blogger numaranızla değiştirmelisiniz.

    <script
    src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"
    type="text/javascript"></script>
<script
    type="text/javascript">
//<![CDATA[
if
    (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload
    != null) { window['blogger_templates_experiment_id'] =
    "templatesV1";window['blogger_blog_id'] =
    '7342017194742683056';BLOG_attachCsiOnload('');
    }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
_WidgetManager._RegisterWidget('_ContactFormView',
    new _WidgetInfo('ContactForm1', 'footer1', null,
    document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg':
    'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.',
    'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again
    later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.',
    'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title':
    'Contact Form', 'blogId': '7342017194742683056', 'contactFormNameMsg':
    'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message',
    'contactFormSendMsg': 'Send', 'submitUrl':
    'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Eklediğimiz üç yöntem ile sorunsuz bir şekilde Blogger İletişim sayfası oluşturma adımlarını başarmış olmaktasınız. Adsense başvuru yaptığınızda sizi bir adım daha kolay bir şekilde adsense onay almanıza yarayacaktır. 

Ayrıca ziyaretçileriniz ile veya müşterileriniz ile daha kolay ve güvenilir bir iletişim kurmuş olacaksınızdır.