Blogger İletişim Sayfası Widget Oluşturma



Blog kullanıcılarının ziyaretçiler ile birebir olarak iletişim kurmalarını kolaylaştıran İletişim Formları / İ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?

1. 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.

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

3. 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 scoped="" 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>
4. Blogunuzun renklerine uygun hale getirmek için yada farklı renkler kullanmak için kod içerisinde bulunan renk kodlarını ayarlayabilirsiniz. Blogger renk kodlarına buradan ulaşabilirsiniz.




İleri
« Geri
Geri
İleri »

Yorumunuz İnceleniyor... HTML DönüştürConversion İfadelerİfadeler