Blogger İletişim Sayfası Widget Oluşturma 2016

16.6.16
Blogger Sabit Sayfa İletişim Widget'ı Nasıl Oluşturulur?

Blog kullanıcılarının ziyaretçiler ile birebir olarak iletişim kurmalarını kolaylaştıran İletişim Formlerı / İletişim Sayfaları blogunuzun daha güvenli olduğunu ve gerçek bir kişiliğe yani sahte olmayan bir blog izlenimi vermektedir. Tabi bu sayfaların bir de kullanışlı ve ziyaretçiler tarafından mobil cihazlar üzerinden de iletişim kurmalarını sağlaması blogunuzun kalitesini yükseltecektir. Bu blog iletişim eklentisinin kolay kurulumu ve hiç bir başka eklentiye ihtiyaç duyulmadan oluşturulması blogunuzun kod yığını olmasının da önüne geçmektedir.

Blogger 2016 İletişim Sayfası Widget'i Nasıl Oluşturulur?

Birinci adım: Blogger hesabınızda oturum açın ve blogunuzu seçin. Seçmiş olduğunuz blogun kumanda panelinden (arayüz) Sayfalar > Yeni sayfa sekmesine tıklayın.

İkinci adım: Açılan sayfada sol üst köşede bulunan Oluştur - HMTL sekmesinden HTML sayfasına tıklayın.

Üçüncü adım: HTML sayfasında varsa tüm kodları silin. Aşağıdaki kodları kopyalayın ve HTML sayfasına ekleyin. Sayfa başlığınızı ve arama açıklamanızı oluşturun ve yayınlayın.

<form id="kontak-bloggereklentileri" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Adınız *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="E-posta adresiniz *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesajınız *" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />  
<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>
<style type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#kontak-bloggereklentileri{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

Blogunuzun renklerine uygun hale getirmek için yada farklı renkler kullanmak için kod içerisinde bulunan renk kodlarını ayarlayabilirsiniz.
Blog sitenizin sabit sayfalarında bir iletişim Widget'ı oluşturmak istiyorsanız, blogunuzun ana sayfasına bir iletişim Widget'ı eklemelisiniz. Yayın ile ilgili soru ve görüşlerinizi yorum bölümünden bize iletebilirsiniz.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

5 yorum

Yahu eklenti düzgün çalışıyordu şimdi göndermiyor.

Cevap

Yerleşimden iletişim widget'ini eklemelisiniz. Varolan widget'i kaldırmış olabilirsiniz.

Cevap

Yeni demo link eklendi bilginize.

Cevap

demo linki verdiğiniz blog silinmiş haberiniz olsun

Cevap