Resmi Blogger İletişim Formunu Sabit Sayfaya Ekleme ~ Omeryen Kişisel Blog

Blogger özelliklerini arttırmaya devam etmiş ve offical iletişim formunu gadget olarak ekleme imkanı sunmuştu. Oldukça hızlı, basit ve kullanışlı olan bu iletişim formunun belki de tek kötü yanı sadece gadget olarak eklenebilmesiydi. Bu yazıda Blogger’ın resmi iletişim formunu kullanarak nasıl iletişim sayfası oluşturabileceğinizi size anlatacağım.

1. Adım: Öncelikle Blogger’ın iletişim formu gadgetını blogunuzun sidebarına eklemeniz gerekiyor. Bunun için Blogger kumanda panelinize girdikten sonra Yerleşim > Gadget Ekle > Diğer Gadgetlar yolunu takip ederek listeden İletişim Formu gadgetını seçin

2. Adım: İletişim formunun sidebarda olmasını istemediğimiz bu adımda formun gadget olarak görünmemesi için gerekli kod değişikliğini yapacağız.

Blogger kumanda paneline girip Şablon > HTML’yi Düzenle yolunu takip ettikten sonra sonraWidget’a Atla > ContactForm1 diyerek iletişim formuna ait kodların olduğu bölüme gelin. Bu bölümdeki kodların sol tarafındaki ▶ ikonuna tıklayarak kodları genişletin. Genişletme işlemini yaptığınızda iletişim formu gadgetına ait kodlar şu şekilde gözükecektir:

        *




        *


        <br>        <p/> <br>        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <br>        <p/> <br>        <div style='text-align: center; max-width: 222px; width: 100%'> <br>          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <br>          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> <br>        </div> <br>      </form> <br>    </div> <br> </div> <br> <b:include name='quickedit'/> <br></font></b:includable> <br> </b:widget></font></p> </blockquote> <p style="padding: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 19.5px; background-color: rgb(255, 255, 255);"> </p> <p style="padding: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 19.5px; background-color: rgb(255, 255, 255);"> Burada kırmızı renkle gösterdiğim kodların tamamını silerseniz blogunuz iletişim formunu algılayacak ancak sidebarda gadget olarak gözükmeyecek. Sonraki adım sabit bir iletişim sayfası oluşturarak iletişim formunu burada göstermek olacak.</p> <p style="padding: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 19.5px; background-color: rgb(255, 255, 255);"> </p> <p style="padding: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 19.5px; background-color: rgb(255, 255, 255);"> <strong style="margin: 0px; padding: 0px;"><u>3. Adım:</u></strong> Sıra sayfayı oluşturma geldi. <font color="#4f81bd" style="margin: 0px; padding: 0px;">Sayfalar > Yeni Sayfa > Boş Sayfa</font> yolunu takip ederek yeni bir sayfa oluşturun ve sayfa başlığına <font color="#f79646" style="margin: 0px; padding: 0px;">İ<strong style="margin: 0px; padding: 0px;">letişim</strong></font><strong style="margin: 0px; padding: 0px;"> </strong> yazın. Daha sonra sol üst taraftaki Oluştur / HTML sekmelerinde HTML sekmese geçerek aşağıdaki kodları buraya yapıştırın:</p> <p style="padding: 0px; color: rgb(51, 51, 51); font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 19.5px; background-color: rgb(255, 255, 255);"> </p> <blockquote style="margin: 0px 25px; padding: 10px; quotes: "" ""; border: 1px solid rgb(248, 172, 0); border-radius: 5px; color: rgb(51, 51, 51); font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 19.5px; background: rgb(248, 228, 184);"> <p style="padding: 0px;"> <div class='widget ContactForm' id='ContactForm1'> <div class='contact-form-widget'> <br>    <div class='form'> <br>      <form name='contact-form'> <br>        <p> İsim<p> <br>        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <br>        <p> E-Posta *</p> <br>        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <br>        <p> Mesaj *</p> <br>        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'>