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 sayfada hem 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>

İ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.

Sabit Sayfalarda İletişim Formu Kurulumu

Hala düzgün görünmeyen yerler varsa aradaki boşlukları silebilir bitişik kalırsa ayırabilirsiniz bu zarar vermeyecektir.

5. Son olarak sayfamıza bir isim veriyoruz ve yayınlayıp görüyoruz güzelleğini :)

İşte Blogger blogta yazı sayfasına iletişim formu eklemek ve takipçilerimizde bağlantıda kalmak bu kadar kolay.

Yazı çok uzun gelmiş olabilir ama kodların uzunluğu o bakmayın siz ona :) Şimdilik bu kadar iyi bloglamalar. Hee bu arada unutmadan anlatamamış olabilirim siz aklınıza takılan yerleri aşağıdaki yorum formunu kullanarak bana sorabilirsiniz. Yorum yapmak için bloğumu izlemeniz gerekiyor bunu için üst menümden üye ol'a tıkla esen kalın :)