Yeni Nesil Blog İletişim Sayfası Oluşturma

Yeni Nesil Blog İletişim Sayfası Oluşturma - Bugün sizlerle paylaşmış olduğum blog yeni nesil iletişim sayfasının bazı özellikleri üzerinde durarak blogunuza olan faydalarından bahsedeceğim. Blogunuzu oluşturdunuz her şey tamam ve sıra iletişim sayfasına geldi. Bir çok sitede bulunan iletişim sayfa eklentilerinin CSS ve HTML eklentileri ile blogunuz hem kod oranı hem de yavaşlamaya başlamaktadır. Ne kadar çok eklenti eklerseniz sayfanızın açılış hızında bir o kadar da yavaşlama olacaktır.

Blogger Blogspot Sabit İletişim Sayfası Oluşturma

Şimdi sizinle paylaşacak olduğum kodlar ile şablon içerisine herhangi bir kod eklemeden iletişim sayfamızı oluşturacağız.

1- Öncelikle blogger kumandan paneline giderek iletişim formu gadgetini blogunuzun sidebar kısmına ekleyin. Yani Yerleşim Diğer Gadgetlar yolunu takip ederek listeden İletişim Formu gadgetini seçiyoruz.

2- İletişim sayfası oluşturmak için blogunuzun kumanda panelinden Tema > HTML üzenle CTRL+F yardımıyla ContactForm1 kodunu bulun ve aşağıdaki kodda belirttiğim renkli kod aralığını silin.

<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5' />
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;' />
<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;' />
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>

3-  İletişim sayfası oluşturmak istediğiniz sayfaya gelerek Sayfalar > Yeni Sayfa > Boş Sayfa aşağıda paylaşmış olduğum kodu sayfanın HTML kısmına ekliyoruz.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content" id="#">
<form name="contact-form">
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;">İsim <span style="color: #f56954; font-size: x-small; font-weight: bold;">önemli</span></span>
<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
<br />
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;">E-posta Adresiniz <span style="color: #f56954; font-size: x-small; font-weight: bold;">önemli</span></span>
<br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<br />
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;">Mesaj <span style="color: #f56954; font-size: x-small; font-weight: bold;">önemli</span></span>
<br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<br />
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<br />
<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>
<br />
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}
#ContactForm1_contact-form-submit{width:100%;float:left;background:#fff;color:#666;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image:linear-gradient(110deg,#D64B25 0%,#D64B25 50%,transparent 50%,transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease,background-position .8s ease,color .8s ease}
#ContactForm1_contact-form-submit:hover{color:#fff;background-position:0 0;border-color:#D64B25}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
</style>
</div>
</div>

Not: Kod içerisinde mavi renk ile belirtmiş olduğum (#) yere blogunuzun yani blogID=609XXXXXXXXXX089'sini ekliyin ve sayfayı yayınlayın, iletişim sayfanız hazır. Güle güle kullanın...

Örnek bir iletişim sayfası görüntülemek için tıklayın.