Blogger İletişim Formunu CSS Kodları ile Renklendirin

Blogger İletişim Formunu CSS Kodları ile Renklendirin
0

Blogger iletişim formu Pencere Arka plan rengi, Metin rengi, Gönder hover arka plan rengi ve genişlik ayarları CSS kodları ile nasıl değiştirilir? Blogger’un üçüncü taraf geliştiriciler tarafından tasarlanmış, Diğer Gadgetler kategorisinde yer alan İletişim Formunu blogunuzun An sayfasında kullanıyor iseniz CSS kod yardımı ile görselliğini değiştirebilirsiniz.

Blogunuzun başlık, sidebar, footer ve arka planının farklı renklerden oluştuğunu düşünürsek, ekleyeceğiniz iletişim form, bçimini bu renkler ile uyumlu olmasını isteyebilirsiniz. İletişim formunuzu özelleştirmeyi düşünüyor ve bunu nasıl yapacağınızı planlıyor iseniz aşağıda yapılan açıklamaları takip ederek düşüncelerinizi gerçekleştirebilirsiniz. İletişim form demosu.

Blogger iletişim formunu oluşturma

1. Blogger kumanda panelinize giriş yapın.

2. Sırası ile, Yerleşim → Gadget ekle → Diğer gadgetler → İletişim, gadget, yanındaki (+) iconuna tıklayın ve gadgeti kaydedin.

iletisim-gadgeti

İletişim form gadgetini ekleme

3. Eklemiş olduğunuz, İletişim gadget eklentinizi sidebar veya footer alanında konumlandırın.

4. İletişim form konumlandırma işlemi bittiğinde aşağıda verilen CSS kodlarını bir metin dosyasına kaydedin.

CSS Kodları :

.contact-form-widget { 
width: 500px; 
max-width: 100%; 
margin: 0 auto; 
padding: 10px; 
background: #E6E7E8; 
color: #000; 
border: 1px solid #656E75; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); 
border-radius: 10px; 
}
.contact-form-name, .contact-form-email, .contact-form-email-message { 
width: 100%; 
max-width: 100%; 
margin-bottom: 10px; 
}
.contact-form-button-submit { 
border-color: #656E75; 
background: #E6E7E8; 
color: #000; 
width: 20%; 
max-width: 20%; 
margin-bottom: 10px; 
}
.contact-form-button-submit:hover{ 
background: #679EC9; 
color: #ffffff; 
border: 1px solid #FAFAFA; 
} 

Blogger şablona kodları ekleme :

1. Öncelikle blog şablon yedeğinizi alın.

2. Yukarıda hazırlamış olduğunuz iletişim formunun güzel görülmesini sağlayan CSS Stil kodlarımızın düzenlesine geçerek uygulamaya başlayalım. Sırası ile adımları takip edin.

→ Şablon → HTML’yi Düzenle yolunu takip ederek, CTRL+F klavye kısa yol aramasını kullanarak şu etiketi aratın (</b:skin>) ve bulduğunuz bu etiketin sol kısımdaki ok işaretine tıklayarak genişletin. Sağ tarafta dikey çubuğu aşağıya doğru ilerleterek turuncu renginde olan arattığınız etiketi bulun.
Not: Bulacağınız etiket “google-analytics” linkinin hemen üstünde yer almaktadır.kapanis-stil-etiketi

Turuncu renk ile belirtilmiş etiketinizin görünümü

3. Bulduğunuz bu etiketin hemen üst satırına verilen CSS Stik kodlarını ekleyin ve şablonu kaydedin. Şablondan çıkmadan kodlar içinde yapabileceğiniz özelleştirmeleri takip edin.

önce-sonra-form

İletişim formu önceki ve sonraki görünümü

İletişim formu CSS kodlarının özelleştirilmesi :

1. width: 300px; Genişlik ayarı kullanılan alana göre özelleştirin.

2. background: #E6E7E8; Pencere arka plan rengi. Temanızın özelliğine göre istediğiniz onaltılık renkler ile değiştirin.

3. color: #000; Metin rengi görülmesini istediğiniz renk ile değişin. (Ad, E-Posta, Mesaj)

4. border: 1px solid #656E75; Pencere dış sınır çizgi kalınlığı (1Px) değerini 2 yaparak daha kalın bir sınır elde edersiniz. Solid’in hemen yanındaki (#656E75) renk kodunu değiştirerek kullanmak istediğiniz rengi belirleyin. (Mavi, Pembe, Turuncu, Kırmızı gibi)

5. border-radius: 10px; Pencere sınır çizgisi köşelerini yuvarlak gösteren etiket. Sayıyı düşürebilir çıkarabilirsiniz.

6. .contact-form-button-submit : Gönder yazı ayarları, Alt kısımdaki ;

background: #E6E7E8; Görülen mevcut renk kodu istediğiniz bir renk ile değişin. Hemen alt kısımda;

color: #000; Gönder yazı rengini değiştirmektedir.

7. contact-form-button-submit:hover : Hover İsminden de anlayacağınız gibi, maus Gönder isminin üzerine geldiğinde mevcut arka plan rengini değiştirmektedir.

background: #679EC9; ve metin rengini color: #ffffff; istediğiniz renk ile değişin.

8. border: 1px solid #FAFAFA; Gönder pencere dış sınır çizgi kalınlığı (1Px) değerini 2 yaparak daha kalın bir sınır elde edersiniz. Solid’in hemen yanındaki (#FAFAFA) renk kodunu değiştirerek kullanmak istediğiniz rengi belirleyin. (Mavi, Pembe, Turuncu, Kırmızı gibi)

9. .contact-form-button-submit : Etiketinde bulunan, width: 20%; ve max-width: 20%; Gönder penceresini genişleten bir değerdir. her iki % de değerini küçültüp, büyüterek konumunu düzenleyebilirsiniz.

NOT: Blogger, üçüncü taraf Geliştiriciler Tarafından eklenen bazi gadget’ler HTTPS ile uyumlu olmayabilir ayrıca CSS kodları da çalışmayabilir. Daha Fazla Bilgi bilgi edinebilirsiniz.

Bu Yazıya Tepkiniz Ne Oldu?
  • 0
    be_end_m
    BEĞENDİM
  • 0
    alki_
    ALKIŞ
  • 0
    _a_kin
    ŞAŞKIN
  • 0
    k_t_
    KÖTÜ
  • 0
    berbat
    BERBAT

1959 yılında Samsunda doğdu. 1989-2005 Yılları arasında Temsa, Mitsubishi, Sabancı Holding grubunda Otomotiv, Bilgi işlem ve Yazılım bölümlerinde Müdür olarak çalıştı. Adnan Güney, şu anda, Network Dizayn Yazılım ve Tasarım koordinatörü olarak çalışmalarına devam etmekte. Ayrıca Blogger, Wordpress, Tumblr, Google sites gibi alanlara ilgili olup, uzun yıllardır SEO ve Alexa üzerinde çalışmakta.

Yazarın Profili

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir