Bayanlara özel blogger İletişim formu

Merhaba arkadaslar blogun resmi iletisim formunu ozellestirebiliyoruz bilindigi gibi..
bayan blogcular artik altaki kod ile blogunuzun iletisim forumu cok daha iyi bi goruntuye sahib olucak

1) yapmaniz gereken bloggerin iletisim formu gadgedini eklemeniz
bunun nasil eklendigini biliyorsunuzdur

sirasiyla
blogger admin paneli / yerlesim / gadget ekle / acilann pencerede diger gadgetlere tikliyoruz ve iletisim formunu gorup ekle diyoruz ( daha onceden bloggerin basit iletisim formunu blogunuza eklediyseniz usteki islemi zaten yapmaniza gerek yok :) )

2) usteki islemle bloggerin basit iletisim formunu blogumuza ekledik simdi altaki kod ile iletisim formunu ozellestiricegiz


yapmaniz gerekenler
sirasiyla

blogger admin paneli / sablon / html yi duzenle / acilan html penceresinden ctrl ve f butonlarini ayni anda tikliyoruz pencerede arama kutusu cikiyor altaki kodu aratiyoruz

</b:skin>

usteki kodu hemen bulduktan sonta usteki kodun hemen bir satir uzerine gelicek sekilde altaki kodu ekliyoruz

/* Blogger bayanlara özel iletişim formu / by: Ferhat Bayram
----------------------------------------------- */
/* Panel bölümü ayarları */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3O06Vh1RJB4R9fxy3MxxsR0upNqca72sNwpk2sHuIdp_HG8VqQqCTA9M5iTgIgylTDgZNj1g6ngcGxqpX9xdQdM2iyE4jhQkwoQj4gi54zNXBKkwJIUBjXT0dg6EucR2PW4tEShVfdp2T/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
/* icon bölümü ayaları */
.contact-form-widget:before {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjYuvEuBJcv5aaabdbdHZpP13NMlfDC4K-6KY-nTepYdVo8pmVGjtmZ-UdjWZ9rhoJoTzjS4TgBtJl_CpUv6KNTofdDWh9QTtOGfKgYNKCR36-Lb3Oy33I-xIZ90rUUw179dMPaKdhmEw/s1600/mektup.png);
background-repeat: no-repeat;
background-position:98% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
/* Boyut ayarları */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Kıy görünüm ayarları */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Gönder butonu ayarları */
.contact-form-button-submit:hover{
background: #d44897;
color: #ff9393;
border: none;
}

usteki kodu ekledikten sonra sablonu kaydet diyoruz :) islem bu kadar
yani ozetle fark altaki iki resimde gordugunuz gibi

öncesi                                                                    
                       

sonrası




yorumlarınızı eksik etmeyin
herkese  iyi bloglamalar iyi haftalar dilerim