Reklam Alanı

Blogger İletişim Formu Hazırlama


İnsanların sizinle iletişim sayfasına geçmek için bir blog sitesinizde bakacağı ilk yer iletişim sayfası olacaktır. Bu rehberde "blogger da iletişim sayfası nasıl hazırlanır?" Bunun hakkında bilgi vereceğim. Blogger da iletişim, gadget olarak kolay bir şekilde eklenebiliyor. Fakat biz bunu iletişim sayfası haline getireceğiz. Blogger iletişim sayfası oluşturma.


1 Etap: Blogger iletişim formu ekleme


İlk olarak Blogger Yönetim Panelini Açın > Yerleşim > Gadget Ekle > Diğer > İletişim Formu Ekleyin.




İletişim formu aşağıdaki resimdeki gibi eklenmiş olması gerekiyor


2. Etap: Tema ayarları

Formu ekledik fakat anasayfa da sağ tarafa değil, iletişim sayfamıza eklemek istiyoruz. Bunun için;

Blogger Yönetim Paneli >Tema > HTML Düzenle tıklıyoruz. CTRL + F komutu ile ContactForm1 aratıyoruz.

      <b:includable id='main'> Kısmından </b:includable> kısmına kadar hepsini siliyoruz.

3. Etap: Birazda CSS

Blogger Yönetim Paneli > Tema > HTML Düzenle tıklıyoruz. CTRL + F komutu ile

]]></b:skin>
Aratıyoruz. Daha sonra üstüne aşağıdaki kodu yapıştırıyoruz.
  /* Bahadirin.Com Blogger İletişim Formu */
.contact-form-widget {
width: 500px; 
max-width: 100%;
padding: 10px;
background: #FFFFFF; 
color: #000; 
border: 0px solid #EEEEEE; 
margin: 0 auto; 
}

.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; }

.contact-form-button-submit {
border: 1px solid #999999; 
background: #EEEEEE;  
color: #333333;  
width: 30%;  
margin: 10px 0px;
}

.contact-form-button-submit:hover{
border: 1px solid #999999; 
background: #666666;  
color: #FFFFFF;  
}

.contact-form-widget #required {color: red; }
.contact-form-widget p { margin-bottom: 5px; }
.contact-form-cross {margin-left: 5px !important;}

.contact-form-error-message-with-border {
background: #eeeeee; 
border: 1px solid #333333; 
bottom: 0;
box-shadow: none;
color: #666;  
font-size: 12px; 
padding: 5px; 
font-weight: bold; 
text-align: center; 
}

/* Bahadirin.Com Blogger İletişim Formu */

4. Etap: Sayfayı oluşturma

Bu adımda Blogger Yönetim Paneli > Sayfalar > Yeni Sayfa tıklıyoruz. Html Bölümüne gelip Aşağıda verdiğim kodu yapıştırıyoruz.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-LAjBh0DHZL8/WeImrnJFoNI/AAAAAAAANEk/1FHVK2phBCoEPFQWGsB4jtzHbDO4w4UrwCLcBGAs/s1600/iletisim.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="319" data-original-width="590" height="173" src="https://4.bp.blogspot.com/-LAjBh0DHZL8/WeImrnJFoNI/AAAAAAAANEk/1FHVK2phBCoEPFQWGsB4jtzHbDO4w4UrwCLcBGAs/s320/iletisim.png" width="320" /></a></div>
<br />
<div style="text-align: center;">
<span style="font-style: italic;"><br /></span></div>
<div style="text-align: center;">
<i>Aşağıda görmüş olduğun formu doldurarak benimle iletişime geçebilirsin.</i></div>
<br />
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
İsim:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        <br />
E-posta: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        <br />
Mesaj: <span id="required">*</span><br />
<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" />
        <br />
<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>
</form>
</div>
</div>
</div>


Ayarlarıda resimdeki gibi yapıyoruz.


Artık sayfamızı yayınlayabiliriz. Son olarakta kontrol ediyoruz.


Resimdeki gibi sonuç aldıysanız. Tebrikler blogger iletişim sayfasını başarıyla oluşturdunuz. İyi günler, iyi bloglar.

9 yorum:

  1. ben buna benzer iletişim formu hazırlamıştım çok güzel olmuştu.

    YanıtlaSil
  2. Adsense için iletişim formu olmazsa olmaz faydalı bir paylaşım olmus

    YanıtlaSil
    Yanıtlar
    1. Adsense için faydası olur mu ya gerçekten öyleyse ben de eklemeliyim

      Sil
  3. her blogger kullanıcısının uygulaması gereken eklentidir.

    YanıtlaSil
  4. Blogger sisteminde de WordPress gibi eklenti yükleme özelliği olsa keşke.

    YanıtlaSil
  5. işime yarayacak faydalı bilgiler için teşekkürler.
    sağlıklı günlerde kalın.

    YanıtlaSil
  6. iletişimi formu koymak lazım tabi ki

    YanıtlaSil
  7. takipçilerinizin size ulaşmasını kolaylaştırmak için iletişim formunu mutlaka eklemek gerekiyor

    YanıtlaSil
  8. biraz zor gözüktü gözüme wordpresse insan alışınca diğer yöntemler zor geliyor.

    YanıtlaSil