Blogger İletişim Sayfası Oluşturma

İletişim formu, okuyucularınızın yazılarınıza alakasız yorum bırakmasını önlemek ve siteniz hakkında görüş ve önerilerini göndermesi için olmazsa olmaz araçlarından birisidir.Sitenize iletişim formu ekleyerek okuyucularınızda geri beslemeleri rahatlıkla alabilir ve onlarla etkileşiminizi artırabilirsiniz.Peki blogger iletişim sayfası oluşturma nasıl yapılır ?

blogger-iletişim-formu-oluşturma-2

Bildiğiniz gibi blogger bir gadget olarak sidebar ya da footer alanına iletişim eklentisi kurmanıza imkan veriyor.Bunu yapmak için

  • Blogger hesabınıza giriş yapın.
  • Yerleşim > Gadget ekle kısmına tıklayın.
  • Açılan pencereden sol menüden “diğer” i tıklayın ve İletişim formu nu seçin

blogger-iletişim-sayfası-oluşturma

  • Başlığınızı yazarak kaydedin.

Sayfanızı yenilediğinizde formun sitenize eklendiğini göreceksiniz.

Sitemizde o kadar gadget varken bir de bu formun sayfamızda geniş yer kaplaması bazen hoş olmuyor.İlaveten iletişimin ayrı bir sayfa üzerinden yapılması daha şık ve profesyonel bir görünüm kazandırıyor.Bu yüzden bir adım daha öteye giderek sabit sayfa oluşturma işlemini gerçekleştirip ve bu sayfaya az önce oluşturduğumuz gadget ı ekleyeceğiz.

  • Gadget olarak eklediğinizi varsayarsak ;
  • Şablon kısmına gelin ve Html düzenleyi seçin.
  • Widget atla kısmından Contact Form u seçin

blogger-iletişim-formu

  • Yanındaki ok işaretlerine basarak şablonu genişletin.Bunu yaptığınızda aşağıdaki kod yapısını bulacaksınız:

blogger-contact-form

  • Seçili alanı tamamen silin ve sadece aşağıdaki gibi kodların kalmasını sağlayın.

<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
    <b:includable id='main'><b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>

Şimdi şablonunuzu kaydedebilirsiniz.

Son adım olarak blogunuzda sabit sayfa oluşturun ve html modda aşağıdaki kodu yapıştırın.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-size: large;">İletişim Sayfama Hoşgeldiniz&nbsp;</span></div>
<br />
<div style="text-align: left;">
<i>Aşağıdaki formu kullanarak her türlü öneri, istek ve şikayetlerinizi bana iletebilirsiniz.Lütfen formu doldururken size ulaşabilmem için geçerli bir mail adresi kullanın.Mail adresiniz kimseyle paylaşılmayacaktır </i></div>
<br />
<div class="contactform-eu">
<form name="contact-form">
<span style="color: #666666; font-family: Oswald, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400;">İsim</span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
<span style="color: #666666; font-family: Oswald, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400;">Mail Adresi <span style="color: red; font-weight: bolder;">*</span></span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
<span style="color: #666666; font-family: Oswald, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400;">Mesajınız <span style="color: red; font-weight: bolder;">*</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" /><br />
<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>#ContactForm1,.entry-meta{display:none}#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #e9e9e9;transition:all 1s ease-in-out}#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:Roboto,sans-serif;border:1px solid #e9e9e9;transition:all 1s ease-in-out}#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{outline:0;border:1px solid #ccc}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:450px;margin-top:35px}.contactform-eu{margin:0 auto}
#ContactForm1_contact-form-submit {background:#6C3AF5;width:125px;height:40px;color:#fff;font-size: 20px;}
</style>
</div>

Sayfanızı yayınlayabilirsiniz.Yayınladığınız zaman iletişim formunun sayfanıza eklendiğini göreceksiniz.Deneme olarak gerekli alanları doldurarak formun mail adresinize ulaşmasını test edebilirsiniz.

--> Blogger iletişim formunu pop up açılır yapın

Eğer yukarıdakileri eksiksiz bir şekilde yaptıysanız blogger iletişim sayfası oluşturma işlemini başarılı bir şekilde tamamlamış olacaksınız.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

2 yorum:

  1. ben blogumda biraz değiştirerek uyguladım bunu. www.fikiryamaci.com

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.