Blogger Şık İletişim Formu Sayfası Oluşturma

Sabit Sayfada Şık Bir İletişim Formu Kurulumu 

Hepiniz biliyorsunuz ki Blogger bize iletişim formu gadget'ı vererek takipçilerimizle kolaylıkla bağlantı kurmamıza yardımcı oluyor. Peki ama bu iletişim formu bloğumuzun ana sayfasında kocaman yer kaplayıp çirkin bir görünüme neden olmuyor mu?

Pekala iletişim formumuzu bloğumuzun neresinde göstereceğiz? İşte tam da bunu anlatacağım bugün. Öyle ana sayfa da falan değil krallar gibi sabit bir sayfadahem de kendi kara kuru görüntüsüyle değil ufak CSS dokunuşlarla şık bir şekilde göstereceğiz. Haydi başlayalım.

1. İlk olarak bloğunuza İletişim Formu Gadgetını ekleyin.

2. Temanıza font yüklemeye geldi sıra. Blogger panelinizden Şablon-HTML'i düzenle deyip temanızın başta şeklini ve herşeyini belirleyen çok önemli uzunca kodlar çıkacak karşınıza. Bu kodlar arasında istediğimiz kodu hemen bulmak için CTRF+F tuşlarına aynı anda basarak arama kutusunu açarız. İşte yine bunu yapın ve şu kodu bulun: </head> Bu kodun üst satırına gelecek şekilde aşağıdaki kodları koplyalayıp yapıştırın.

<Link href = '// netdna.bootstrapcdn.com/
font-awesome/4.0.3/css/font-awesome.css' rel = "stylesheet" />

3. Sonra yine aynı yerde şu kodu bulun ]]></b:skin> üst satırına aşağıdaki CSS kodlarını kopyalayın.

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, 
#ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

Şablonu/temayı kaydedin.

4. Şimdi sırada iletişim formumuzu sayfaya eklemek var. Bunun için yine Blogger panelimzde soldaki menüden Sayfalar-Yeni Sayfa yolunu takip ederek açılan yazı alanının sol üst kısınmda oluştur HTML yazan iki buton var. İkinci butona basarak açılan alana aşağıdaki HTML kodlarını yapıştırıyoruz ve oluştur diyoruz.

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa 
fa-user"></i> İsim</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa 
fa-envelope"></i> Email Adresi<span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa 
fa-pencil"></i> Mesajınız<span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" 
name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Not : İletişim formumuzun düzgün gözükmesi için sayfanın sağ tarafında bulunan seçenekler sekmesine tıklayarak ayarlarını aşağıdaki görselde olduğu gibi yapmamız gerekiyor.

Hala düzgün görünmeyen yerler varsa aradaki boşlukları silebilir bitişik kalırsa ayırabilirsiniz bu zarar vermeyecektir.Aklınıza takılan yerleri aşağıdaki yorum formunu kullanarak bana sorabilirsiniz.