Kategorileri Aç / Kapat

Blogger İletişim Formu Eklentisi (Kapsamlı Düzenleme)

Hadi şimdi BEĞEN butonuna tıklayarak Facebook sayfamıza katıl. Hoş geldin :)


Blogger İletişim Formu Eklentisi (Kapsamlı Düzenleme)
Bildiğiniz gibi Blogger'da "İletişim Formu" adlı bir gadget mevcut. Ancak standart görünümü çok sıradan gelebilir sizlere. Bana da öyle geldi ve kolları sıvadım. Sadece CSS kullanarak Blogger'ın iletişim formunu kapsamlı bir şekilde yeniden biçimlendirdim. Sizin yapmanız gereken tek şey ise, aşağıdaki kodları temanızın CSS bölümüne eklemek. Varsayılan eklenti kullanıldığı için, ilgili widget ile entegre bir şekilde kodlar da çalışacaktır. Beğenmenizi temenni ediyorum arkadaşlar.

AYRICA: Blogger Yorumlardaki Fazla Boşlukları Otomatik Kaldırmak

Blogger İletişim Formu Eklentisi (Kapsamlı Düzenleme)


#ContactForm1{padding-right:0!important;padding-left:0!important;margin-left:0!important;margin-right:0!important}
.contact-form-button{transition: none!important;}
.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{background-color:#666;border-radius:0!important;border:none!important;background-image:url(http://2.bp.blogspot.com/-KddzYsT9ons/XHVnns-wnjI/AAAAAAAATKk/d6-Aat49P4s7-MbFZc67bJ2y5kIBZwR3ACK4BGAYYCw/s1600/iletiliyor.png)!important;background-position: center center;background-repeat:no-repeat!important;color:#fff;opacity:1!important}
.contact-form-button{border:none!important;box-shadow:none!important}
input:focus {outline:none !important;}
textarea {resize: none;line-height:1.8em}
.contact-form-email,.contact-form-name{border:1px solid #ddd!important}
.contact-form-email-message{border:1px solid #ddd!important}
.contact-form-email:hover,.contact-form-name:hover,.contact-form-email-message:hover{box-shadow:none!important;}
.contact-form-email:focus,.contact-form-name:focus,.contact-form-email-message:focus{border:1px solid #374760!important;box-shadow:none!important;outline:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{margin:15px auto;padding:15px!important}
#ContactForm1_contact-form-email-message{margin:15px auto;padding:15px!important}
#ContactForm1_contact-form-submit{max-width:100%;font-size:18px;font-weight:normal;width:450px;height:40px;line-height:0px;padding: 25px;margin:10px 0 0px 0px;cursor:pointer;color: transparent;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{font-weight:normal;box-sizing:border-box;width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f0f0f0;border:none;box-shadow:none;color:#444;padding:10px 10px;}
.contact-form-success-message-with-border{background:#f0f0f0!important;border:none!important;box-shadow:none!important;color:#444!important;padding:10px 10px!important;}
img.contact-form-cross {cursor:pointer;margin-left:10px;margin-right:0!important}
.contact-form-button-submit:focus,.contact-form-button-submit.focus{box-shadow:none!important}.contact-form-button-submit:focus,.contact-form-button-submit.focus{border:none!important}
.contact-form-button-submit:focus,.contact-form-button-submit.focus{border:none!important}.contact-form-button-submit:focus:hover,.contact-form-button-submit.focus:hover{border:none!important;box-shadow:none!important;}
.contact-form-button-submit{background-color:#374760;border-radius:0!important;border:none!important;background-image:url(http://3.bp.blogspot.com/-x54vELArjWg/XHVnlCKjfwI/AAAAAAAATKc/-PQx4yi7-E08eT0RRAv0G-_woVVYdLsYgCK4BGAYYCw/s1600/gonder.png)!important;background-position: center center;background-repeat:no-repeat!important}
.contact-form-button-submit:hover{background-color:#374760}

Örnek Görünüm

Blogger İletişim Formu Eklentisi (Kapsamlı Düzenleme)

Not: İlgili eklenti, tam anlamı ile sıfırdan düzenlendi. Dolayısı ile iletişim formu ile ileti gönderilirken karşınıza çıkan efektler v.b. tümü yenilendi. Böylelikle daha güzel bir görünüm elde etmiş olduk. Dilerseniz hemen bugün kodları deneyebilirsiniz.

Beğendin mi? Beğen veya Paylaş butonlarına tıklayabilirsin. Teşekkürler :)

Hiç yorum yok: