Cara Membuat Halaman Contact Us Sederhana Dan Fast Loading Di Blogger

Membuat Halaman Contact Us Sederhana Di Blogger - contact us adalah sebuah halaman dimana di peruntukan untuk pengunjung yang ingin berkomentar secara pribadi ke email pemilik web/blog. komentar berupa saran, atau hanya ingin berkomunikasi secara langsung ke pemilik blog/web secara pribadi.

Baca Juga : Cara Membuat Halaman Site Map simple keren dan responsive

Di artikel kali ini saya akan membuat halaman Contact us sederhana yang dibuat dengan halaman contact form yang telah di sediakan langsung di blog. kita hanya akan mengedit html yang telah disediakan.

DEMO

Berikut langkah-langkah Membuat Halaman Contact Us Sederhana Dan Fast Loading Di Blogger :

1. Masuk ke dashboard blog kamu di www.blogger.com
2. Kemudian pilih tata letak

3. Tambahkan Gadget/widget contact form yang telah disediakan langsung oleh blogger dan kemudian simpan, lihat gambar untuk lebih jelas :

Cara Membuat Halaman Contact Us Sederhana Dan Fast Loading Di Blogger

4. Masuk ke template dan pilih edit html
5. Di halaman edit html pilih lompat ke widget Contact Form1

Cara Membuat Halaman Contact Us Sederhana Dan Fast Loading Di Blogger

6. Kemudian cari <b:if cond='data:title != &quot;&quot;'>  gunakan ctrl+f 
7. Cari dan hapus dan simpan kode di bawah ini :

 <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> 

8. Kemudian save template
9. Masuk ke pembuatan laman baru
10. Pilih menu html 'disamping menu compose'
11. pastekan kode di bawah ini ke halaman edit html

 <div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<br />
<br />
Email
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />
<br />
Message
<span style="font-weight: bolder;">*</span>
<br />
<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="Send" />

<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div> 

12. Jangan lupa beri judul dan kemudian simpan

Itulah cara membuat contact Us Sederhana Dan Fast Loading Di Blogger. Semoga bermanfaat dan jangan lupa tinggalkan komentar.