blogger iletişim sayfası formu olurşturma,blogger özel iletişim sayfası kodları,blogger iletişim oluşturma,TeknoWin
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.
Axact

Admin Ælis

TeknoWin.blogspot.com Bir çok konuda fikir sahibi olduğu kategorilere yönelip kullanıcıya en iyi ve en özgün bilgiyi sunmayı amaç edinmiştir.TeknoWin Olarak Güncel Haber , Teknoloji , İnternet , Program İndirme , Blogger Konuları , Blogger Temaları Magazin Haberleri , İlginç Bilgiler ,Pratik Bilgiler ve Çözümler , Program Hataları ve Çözümleri Film İndir ve Dizi İndir Oyun İndir , Film Dizi Hakkında Öneriler , Videolar Komik Gifler Fotograflar Tüm Bu Kategorileri Baz Alan Genel Güncel Paylaşım ve Portal Sitesidir...

Yorum Yap:

0 Hiç Yorum Yapılmamış İlk Yorumu Sen Yapmak İstermisin:

Yorum yazabilmek için:
Yorumlama biçimi seçeneklerinden profil üyeliğiniz yoksa; Adı/URL profilini seçip kendi belirlediğiniz isimle URL kısmını boş bırakarak yorum yazabilir ya da Anonim profili seçeneği ile isimsiz olarak yorum yapabilirsiniz.