Serimizin ilk bölümünde, BlogSpot blogunuza bir iletişim formu eklemeyi ve görüntüleme ayarlarını kontrol etmeyi öğrendiniz. Bugün, stil sayfasını özel stillerinizi daha çekici bir tasarımla yansıtacak şekilde nasıl değiştireceğinizi öğreneceksiniz. Bugün, Form giriş alanlarını nasıl özelleştireceğinizi, simgeler nasıl ekleyeceğinizi, bir "Temizle Düğmesi" nasıl ekleyeceğinizi ve özel formunuzla çeşitli hileler nasıl yapacağınızı öğreneceksiniz. Form, günümüzde yaygın olarak kullanılan PHP Formlarının aksine, XHTML Get veya Post Yöntemleri kullanılarak oluşturulmuştur. Eğitimimizin ilk bölümüne başvurmadıysanız, lütfen önce okuyun:
3. İletişim Formunu Özelleştirme - Eğlenceli Kısım!
Şimdi, yeni iletişim formumuz için HTML kodunu ekleyeceğimiz Statik bir Sayfa oluşturmanız gerekiyor.
Blogger > Sayfalar'a gidin
Boş bir Sayfa seçin
İstediğiniz başlığı verin. "Bize Ulaşın"ı öneririm.
HTML moduna geçin ve içine aşağıdaki HTML kodunu yapıştırın:
<div class='form'>
<!-- Custom Contact Form By MBT Starts -->
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<!-- Custom Contact Form By MBT Ends -->
</div>
5. Blogger Editörünüzün Oluşturma Moduna geçmeyin, aksi takdirde Editör ayarlarınız nedeniyle kod bozulur. Sayfanızı Kaydedin ve Yayınlayın.
Şimdi iletişim sayfanızı ziyaret ettiğinizde, mavi butonlu varsayılan iletişim formunu göreceksiniz. Varsayılan stillerini özelleştirme zamanı.
Formu Özelleştirme:
- Blogger'a Git > Şablon
- Şablonunuzu yedekleyin
- Click "Edit HTML"
- Update: Bu Kodu bul </head> ve hemen üstüne aşağıdaki CSS kodunu yapıştırın:
<style>
/*---- Compatible contact Form by MBT -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTou4MA0U8ykzwZIVpLplV7bW59Lg1DhnWtlFOCVfSwtQvRmcoex4UcHOc0Iz5VGcl1SXmJEie05Mk-q7qjFkPCN-LlRpS6R6SemU3gsRPMiJ4FlFZsN03ViDZ8ASfTB2n31mB7IhXxBo/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdChM6YSPJ3-Hl9PsgsXODdpRwyF5DSPgrqioBXxdtIh757ZiXG7nQ225uyJAKK5XxQJoL3nvQDLNRVzD2ApiJ6Inut0k5HRkQ0t7SR7wQA3pf-dxCfs1gthnsQZWcUZvWu9b7V_FzBRo/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}
.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}
.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>
<!--[if IE 9]>
<style>
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTou4MA0U8ykzwZIVpLplV7bW59Lg1DhnWtlFOCVfSwtQvRmcoex4UcHOc0Iz5VGcl1SXmJEie05Mk-q7qjFkPCN-LlRpS6R6SemU3gsRPMiJ4FlFZsN03ViDZ8ASfTB2n31mB7IhXxBo/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdChM6YSPJ3-Hl9PsgsXODdpRwyF5DSPgrqioBXxdtIh757ZiXG7nQ225uyJAKK5XxQJoL3nvQDLNRVzD2ApiJ6Inut0k5HRkQ0t7SR7wQA3pf-dxCfs1gthnsQZWcUZvWu9b7V_FzBRo/s320/email.png) no-repeat 7px 6px;
}
</style>
<![endif]-->
<style>
@media screen and (-webkit-min-device-pixel-ratio:0) {
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTou4MA0U8ykzwZIVpLplV7bW59Lg1DhnWtlFOCVfSwtQvRmcoex4UcHOc0Iz5VGcl1SXmJEie05Mk-q7qjFkPCN-LlRpS6R6SemU3gsRPMiJ4FlFZsN03ViDZ8ASfTB2n31mB7IhXxBo/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdChM6YSPJ3-Hl9PsgsXODdpRwyF5DSPgrqioBXxdtIh757ZiXG7nQ225uyJAKK5XxQJoL3nvQDLNRVzD2ApiJ6Inut0k5HRkQ0t7SR7wQA3pf-dxCfs1gthnsQZWcUZvWu9b7V_FzBRo/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;
}
.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}
.contact-form-button {
height: 28px;
}
}
</style>
Yukarıdaki Stil Sayfası, Internet Explorer dahil tüm tarayıcılarda sorunsuz çalışacaktır. Kod, IE, Mozilla ve Webkit gibi tüm yaygın tarayıcılarla uyumlu hale getirilmiştir.
5. Şablonunuzu kaydedin ve işte bu kadar!
Görüşleriniz: Bu eğitimin hepiniz için yararlı olacağını umuyorum. Adımlar son derece basittir ve kodlar dikkatlice yazılmıştır. Artık müşterilerinizin sizden fiyat teklifi istemesini sağlamak için bir iletişim formu oluşturabilir veya okuyucularınızın sizinle şahsen iletişime geçmesini sağlamak için bu formu ekleyebilirsiniz. Bloglama çalışmalarınızda hepinize başarılar dilerim. Bundan sonuna kadar keyif almanızı sağlayacağım. Selam ve sevgiler arkadaşlar :)
Post a Comment