Blogger'da daha profesyonel bir görüntü elde etmek isteyen blog sahipleri elbette normal sitelerde olduğu gibi kendilerinin de iletişim sayfası olsun istiyor. Bugün sizlere Blogger İletişim Sayfası nasıl oluşturulur bunu tarif edeceğim. Paylaştığım bilgiler Türk ve yabancı blogger dersleri sitelerinden harmanlayıp size sunmuş olduğum bilgilerdir. Deneyip doğruluğunu kontrol ettikten sonra sizinle paylaşıyorum.
İsterseniz öncelikle demosunu kontrol edelim, beğenirsek öyle başlayalım.
Her ihtimale karşı bu işlemleri yapmadan önce şablon sayfasında şablon yedeğini almanızı tavsiye ediyorum.
1. İletişim Formu Ekleyelim
Blogger iletişim sayfası oluşturmak için önce yerleşim ekranından sidebar bölümüne Blogger iletişim formu eklememiz gerekiyor. Footer ya da başka bi alana eklersek çalışmama ihtimali olabilir bunun için sidebar a eklediğimizden emin olalım.
2. Formun Sidebarda Görünmemesini Sağlayalım
İstediğimiz durum iletişim formumuzu sidebarda görmekten ziyade bir iletişim sayfası oluşturmak olduğu için bu adımda HTML Düzenleme bölümünden gerekli değişiklikleri yapacağız.
Adımlarını takip edelim ve iletişim formunun kodlarını bu şekilde bulmuş olalım. Daha sonra ContactForm1 satırının sol tarafındaki ▶ işaretine tıklayalım ve o satırın tamamen açılmasını sağlayalım. Kodları genişlettik ve karşımıza şu şekilde kodlar geldi.
<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> Turuncu renkte görmüş olduğumuz kodlarımızı silelim ve bu sayede iletişim formunun sidebarda görünmesini engellemiş olalım.
3. İletişim Sayfamızı Oluşturalım
Şimdiki adımda iletişim sayfamızı oluşturacağız ve artık son işlemlerimizi yapıp iletişim sayfamızı oluşturmuş olacağız.
Sayfalar > Yeni Sayfa
yolunu takip edelim ve Sayfa Başlığı bölümüne "İletişim" yazalım. Sonra hemen altında solda Oluştur/HTML butonlarından HTML ' i seçelim ve aşağıdaki kodu oraya yapıştıralım.
yolunu takip edelim ve Sayfa Başlığı bölümüne "İletişim" yazalım. Sonra hemen altında solda Oluştur/HTML butonlarından HTML ' i seçelim ve aşağıdaki kodu oraya yapıştıralım.
<div class='widget ContactForm' id='ContactForm1'> <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>İsim<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-Posta *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Mesaj *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder'/>
<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>
</form>
</div>
</div>
</div>
Önizleme yaparak herhangi bir sorun olmadığını teyit edelim, sorun yoksa sayfayı kaydedip kapatalım ve sonraki adıma geçelim.
4. İletişim Sayfasına Şekil Verelim
Son adım olan css kodlarını ekleme bölümünde de çok basit bir işlem yapacağız.Şablon > HTML’yi Düzenle diyelim.
Ctrl + F tuşlarına basarak şablonumuzda ]]></b:skin> kodunu bulalım. Bulamadıysanız b:skin şeklinde aratıp manuel olarak bulalım çok fazla olmaz zaten 1-2 tane olur bu koddan.
Kodu bulduktan sonra hemen üstüne gelecek şekilde şu kodları ekleyelim.
/* Hocamia İletişim Sayfası */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #E6E7E8;
color: #000;
border: 1px solid #656E75;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #656E75;
background: #E6E7E8;
color: #000;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #679EC9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
/* Hocamia İletişim Sayfası */Ekledikten sonra şablonu kaydedelim. Blogger’ın resmi iletişim formunu kullanarak oluşturduğumuz iletişim sayfası artık hazır!
Artık sizde iletişim sayfanız ile daha profesyonel bir görünüme kavuştunuz!
Sorun yaşadığınız bir yer olursa yorum bölümünden sorabilirsiniz.
↓ Bu içeriği beğendiyseniz lütfen paylaşın ↓
Merhaba, ben Yavuz Selim Kutsal. Sizlerin en iyi şekilde Blogger deneyimi yaşayabilmesi için paylaşımlar yapmaktayım. Özel olarak yardım almak istediğiniz konuları iletişim bölümünden bildirebilirsiniz.
Kod AlKod Sekmesini Kapat EmojiEmoji