Blogger İletişim Sayfası Oluşturma

İletişim sayfası, yazarların ziyaretçilerle haberleşmesini sağlar ve her sitede bulunması gereken bir önemli bir ögedir. Çünkü ziyaretçiler yöneticilerin çoğunlukla girmedikleri sayfalara girerler ve fark edilmeyen detayları fark ederler... Büyük çaplı siteler yaptıkları yeniliklerin hemen ardından sayfalarının herhangi bir köşesine "Geri Bildirim" butonu ekler. Bunun amacı eksikleri olabildiğince hızlı şekilde gidermek ve kullanıcı odaklı çalışıldığını göstermektir.

Blogger sayfalara eklenecek basit bir form sayesinde insanlar istek, öneri ve şikayetlerini istedikleri gibi iletebilirler. Bu iletişimi 2013 yılı Mayıs ayındaki güncellemeden önce Jotform, google dökümanlar, contactmegibi araçlarla sağlıyorduk. Neyse ki Google sesimizi duydu ve bizi bu zahmetlerden kurtararak iletişim formu gadgetini kullanıma sundu. Ancak buna rağmen hala eski yöntemleri kullananlar var. Maalesef diyorum çünkü böyle bir hizmet varken siteye ayrıca kod yükü bindirmek bana pek mantıklı gelmiyor. Felsefe1453

Aşağıda blogger'in resmi iletişim formunu sabit sayfaya nasıl ekleyebileceğinizi resimli şekilde anlattım. İnşallah işinize yarar...Felsefe1453

Formun yan menüye eklenmesi

Kodları direk sayfaya eklediğiniz takdirde eklenti çalışmadığından dolayı ufak bir bağlantı ayarı yapmamız gerek. Bunun için; Yerleşim > Gadget Ekle > Diğer Gadget'lar kısmına gelin ve İletişim Formu'nu seçip kaydet deyip çıkın.Felsefe1453

Sayfaya eklenecek kodların alınması

Gadgetimizi ekledikten sonra; Şablon > Html'yi düzenle kısmına giderek Ctrl+F ile aşağıdaki kodları bulun.İletişim Formu veya ContactForm şeklinde aramanız işinizi kolaylaştıracaktır. Bulduktan sonra siyah ok ile gösterdiğim ... veya ▶ işaretine tıklayarak kodları açın.Felsefe1453

Kodlar arasından turuncu renk ile işaretlediğim kısımları 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>

Sonuç olarak yalnızca aşağıdaki kodlar kalacak. Temanızı kaydedin.Felsefe1453

Kodların sabit sayfaya eklenmesi

Blogunuz > Sayfalar > Yeni Sayfa diyerek iletişim sayfasını oluşturun.

Oluşturduğunuz sayfadaki HTML kısmına aşağıdaki kodları kopyalayıp yapıştırın.


<div class="form">
<form name="contact-form">
İsim
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-Posta
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Mesaj
<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" />
<div style="max-width: 222px; 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>
<style>
.contact-form-widget{width:350px;max-width:300%;padding:10px}
.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:350px}
.contact-form-button-submit{width:100px;height:28px}
#ContactForm1_contact-form-email-message{width:350px;border-radius:4px;margin-bottom:10px;padding:15px 10px 15px 5px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:250px;height:30px;border-radius:4px;margin-bottom:10px;padding-left:5px}
.comments{display:none}
</style>

Notlar

1. Yeni sayfa oluştururken sağ menüde Seçenekler kısmını göreceksiniz. Eğer iletişim sayfanıza yorum gelmesini istiyorsanız okuyucu yorumlarına izin ver'i seçebilirsiniz. Bu durumda yapmanız gereken stil kodları arasında turuncu renk işaretlediğim .comments{display:none} kodunu kaldırmaktır.

2. Bu gadget aracılığıyla atılan mesajlar sitenin sadece yöneticilerine ulaşır, yazarlara gitmez.

3. Tarayıcı linkinizin daha güzel görünmesi için sayfayı ilk oluşturduğunuzda başlığı Türkçe karakter kullanmadan ve ayırarak yani iletisim, bize-ulasin şeklinde yazıp yayınlayın. Daha sonra dönerek düzeltebilirsiniz.

Tüm işlem bu kadardı arkadaşlar. Takıldığınız bir yer olursa bizzat yardımcı olabilirim. Hepinize iyi bloglamalar...Felsefe1453 Ekibi