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.