Adana Adıyaman Afyon Ağrı Aksaray Amasya Ankara Antalya Ardahan Artvin Aydın Balıkesir Bartın Batman Bayburt Bilecik Bingöl Bitlis Bolu Burdur Bursa Çanakkale Çankırı Çorum Denizli Diyarbakır Düzce Edirne Elazığ Erzincan Erzurum Eskişehir Gaziantep Giresun Gümüşhane Hakkari Hatay Iğdır Isparta İstanbul İzmir K.Maraş Karabük Karaman Kars Kastamonu Kayseri Kırıkkale Kırklareli Kırşehir Kilis Kocaeli Konya Kütahya Malatya Manisa Mardin Mersin Muğla Muş Nevşehir Niğde Ordu Osmaniye Rize Sakarya Samsun Siirt Sinop Sivas Şanlıurfa Şırnak Tekirdağ Tokat Trabzon Tunceli Uşak Van Yalova Yozgat Zonguldak
İstanbul
Parçalı Bulutlu
18°C
İstanbul
18°C
Parçalı Bulutlu
Cumartesi Gök Gürültülü
16°C
Pazar Gök Gürültülü
13°C
Pazartesi Parçalı Bulutlu
16°C
Salı Parçalı Bulutlu
18°C

Blogger İletişim Sayfası Oluşturma

Blogger İletişim Sayfası Oluşturma
11.04.2018
0
A+
A-

Blogger platformu gün geçtikçe gelişiyor ve yeni özellikler ekleniyor. İlk kurulduğunda Blogger kendine ait iletişim eklentisi ile hizmet veriyordu tabi bu iletişim eklentisi pek kullanışlı değildi. Ama artık dışardan kodlarla kullanışlı ayrı bir iletişim sayfası oluşturabilirsiniz.

Bu yazımda size Blogger’da nasıl ayrı iletişim sayfası oluşturacağınızı anlatacağım böylece daha kullanışlı ve gadget değil, (Kenar Çubuğunda değil) sayfa şeklinde bir iletişim sayfasına sahip olacaksınız. Haydi o zaman başlayalım.

Blogger Ayrı İletişim Sayfası Nasıl Oluşturabilirim?

İletişim Formunu ayrı bir sayfa olarak oluşturmak için aşağıdaki adımları izleyin. Bir ön izlemesini görmek istiyorsanız, örnek olarak oluşturduğum iletişim sayfayı kontrol edebilirsiniz.

1-) Sayfalara gidin yeni sayfa ekle ile Aşağıdaki kodu yeni oluşturduğunuz İletişim sayfası HTML bölümüne yapıştırın.

2-) ÇOK Önemli: Ardından kod içindeki https://formspree.io/Mailadresiniz yeri bulun ve Mailadresiniz yazan yere mail adresinizi yazın. Buraya kendi mail adresiniz yazmazsanız mailler gelmez.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#contactForm input:focus ~ label,#contactForm textarea:focus ~ label,#contactForm input:valid ~ label,#contactForm textarea:valid ~ label{font-size:0.75em;color:#D35400;top:-2.25rem;-webkit-transition:all 0.125s ease;transition:all 0.125s ease}
#contactForm .styled-input{float:left;width:33.3333%;margin:2rem 0 1rem;padding:0 10px 0 0;position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#contactForm .styled-input-in{position:relative}
#contactForm{margin-right:-10px}
#contactForm .styled-input label{color:#999;padding:1rem;position:absolute;top:0;left:0;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;pointer-events:none;line-height:1}
#contactForm .styled-input.wide{width:100%}
#contactForm input,#contactForm textarea{padding:1rem 1rem;border:1px solid #ddd;width:100%;font-size:1rem;background:#fafafa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#contactForm input ~ .span1,#contactForm textarea ~ .span1{display:block;width:0;height:3px;background:#D35400;position:absolute;left:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}
#contactForm input ~ .span2,#contactForm textarea ~ .span2{display:block;width:0;height:3px;background:#D35400;position:absolute;right:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}
#contactForm input ~ span{bottom:0}
#contactForm textarea ~ span{bottom:5px}
#contactForm input:focus,#contactForm textarea:focus{outline:0}
#contactForm input:focus ~ .span1,#contactForm textarea:focus ~ .span1,#contactForm input:focus ~ .span2,#contactForm textarea:focus ~ .span2{width:50%}
#contactForm textarea{width:100%;min-height:15em}
#contactForm .btn{font-family:"Helvetica","Arial",sans-serif;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:1px;border-radius:0;padding:0 25px;height:51px;line-height:51px;color:#333;background-color:#fafafa;border:1px solid #ddd;cursor:pointer;margin:20px 0 0;background-image:none}
#contactForm .btn-default:hover,#contactForm .btn-default:focus{background-color:#D35400;border:1px solid #0400bf;color:white}
</style>

<br />
<form action="https://formspree.io/Mailadresiniz" id="contactForm" method="POST" name="sentMessage" target="_blank">
<div class="styled-input">
<div class="styled-input-in">
<div style="text-align: left;">
<input name="name" required="required" type="text" />
<label>İsim</label></div>
<span class="span2"></span></div>
</div>
<div class="styled-input">
<div class="styled-input-in">
<input name="email" required="required" type="email" />
<label>Email</label>
<span class="span1"></span><span class="span2"></span> </div>
</div>
<div class="styled-input">
<div class="styled-input-in">
<input name="_replyto" required="required" type="Konu" />
<label>Konu</label>
<span class="span1"></span><span class="span2"></span> </div>
</div>
<div class="styled-input wide">
<div class="styled-input-in">
<textarea required="required"></textarea>Mesajınız</div>
</div>
<button class="btn btn-default" type="submit">Gönder</button>
</form>
</div>

3-) Şimdi sayfayı yayınlayın.

Not: İletişim Formumuz yenilenmiştir.

İletişim Formu Onaylama

Son olarak iletişim formumuzu yani mail adresimizi onaylamamız gerekir. Bunun için deneme bir mail gönderin. gönderdiğiniz bu mail ile sizi başka bir sayfaya yönlendirecek. Aşağıda gördüğünüz bir pencere açılacak.

Burada ben robot değilim deyip onaylayın.

Ardından size bir onaylama maili yollanacak. E-postanıza gelen bu maili onayladıktan sonra artık bu formu kullanabilirsiniz.

Bu yazıda size iletişim sayfasının nasıl oluşturacağınızı anlattım umarım işinize yaramıştır. Takıldığınız bir yer varsa yorum bölümünden bana bildirebilirsiniz.

Bunlarda işinize gelebilir.

⇒ Ücretsiz Blogger Temaları

⇒ Blogger Temel Ayarları

⇒ Adım Adım Ücretsiz Blog Kurmak Blogger (Görsel Anlatım

Yorumlar
  1. DOgan dedi ki:

    reCAPTCHA kodu nasıl eklenir bu oluşturduğunuz iletişim formuna. Son zamanlarda bloggerda spam mailler arttı. Onune geçmemiz lazım

    1. Webmavi dedi ki:

      iletişim formumuzu spama karşı yeniledik.

  2. Web ve Teknoloji dedi ki:

    iletişim formunuzu sitemde uyguladım spam koruma onayı geldi aktif ettim ancak bir başka mail ile deneme yaptığımda ” Geçersiz e-posta adresi
    [email protected], iletişim formunu girdiniz . Bu geçersiz bir e-posta adresidir. Lütfen formu düzeltin ve buraya tekrar göndermeyi deneyin .

    Bu, formla ilgili bir sorun da olabilir. Örneğin, _replyto veya e-posta adı özniteliğine sahip iki alan olabilir . Formun bozulduğundan şüpheleniyorsanız, lütfen form sahibiyle iletişime geçin ve araştırmalarını isteyin ” hatayı almaktayım yardımcı olurmusunuz.

    1. Webmavi dedi ki:

      Yorumunuz için teşekkürler. hatayı düzelttik. input name=”_replyto” required=”required” type=”email” email yazması gereken yere _replyto yazmışız.

  3. ibrahim dedi ki:

    Kullanıcının mesajında ne yazdığı belirlenmiyor. Epostada sorun yok ama ne yazdığı boş görünüyo

  4. Kaan dedi ki:

    Teşekkürrler.