Bu sitedeki her şey ile kodlanmıştır.

Kategori Listesini Göster

Blogger için Süper Ötesi İletişim Formu Düzenlemesi


Blogger için Süper Ötesi İletişim Formu DüzenlemesiBlogger bildiğiniz gibi kapalı bir sistem. WordPress gibi değil. Ancak biraz kodlama bilgisi ile, Blogger'dan oluşturulan bir blogu benzersiz bir hâle getirebilmeniz mümkündür. Bilirsiniz, "iletişim formu," adlı gadget standart bir biçime sahiptir. Bu bana göre pek güzel değil... Bu yüzden Blogger'ın iletişim formu eklentisini kullanarak sıfırdan düzenlemelerde bulundum. Ortaya çok güzel, Responsive bir düzenleme çıktı. Aşağıdaki kodları CSS bölümünüze eklemeniz ise yeterli olacaktır.

AYRICA: Blogger Yorumlarındaki Gereksiz Boşlukları Kaldırmak

Blogger için Süper Ötesi İletişim Formu Düzenlemesi

#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 #C9302C!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:#C9302C;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:#C9302C}

Örnek Görünüm

Blogger için Süper Ötesi İletişim Formu Düzenlemesi

Not: Temanız Responsive ise, ilgili eklenti kodları da Responsive olarak çalışacaktır.

  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri