Cara Membuat Halaman/Laman Contact Us

Langkah-Langkah Cara Membuat Halaman/Laman Contact Us

Versi Dekstop :

1. Login ke blogger.
2. Di menu kiri klik Tata Letak (Layout).
3. Lalu pilih dimana tempat yang ingin anda letakkan formulir kontaknya
4. Setelah itu klik "Tambahkan Gadget" dan cari yang namanya Formulir Kontak (Contact Form).
5. Lalu save/simpan gadget widget
6. Kemudian klik Halaman di menu kiri.
7. lalu di menu kiri atas klik Halaman Baru.
8. Setelah itu tulis judul halamannya yaitu : Contact Us dan ubah Tampilan tulisan menjadi Tampilan HTML.
9. Lalu Copas (Copy-Paste/Salin-Tempel) kode berikut ke halaman tadi : (Jika kesulitan untuk memblok kodenya, download disini)

<div class="widget ContactForm" data-version="2" id="ContactForm1">
<h1 style="text-align: left;"><span style="font-family: helvetica; font-size: large;"><u style="background-color: white;">
Contact-Form
</u></span></h1>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p></p><span style="background-color: white; font-family: helvetica;">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="20" type="text" value="" />
</span><p></p><span style="background-color: white; font-family: helvetica;">
Email
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
</span><p></p><span style="background-color: white; font-family: helvetica;">
Message
<br />
<textarea class="contact-form-email-message" cols="40" id="ContactForm1_contact-form-email-message" name="email-message" rows="20"></textarea>
</span><p></p>
<span style="background-color: white; font-family: helvetica;"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span>
<p></p>
<div style="max-width: 222px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
</div>
</div>

10. Kemudian publiskan halaman tersebut, dan salin url halaman tersebut.
11. Lalu masuk ke menu Tata Letak di menu kiri
12. Setelah itu tambahkan gadget halaman, kemudian klik TAMBAHKAN ITEM BARU dan pastekan url halaman tadi ke tulisan "Url Halaman", jangan lupa memberi nama halamannya yaitu Contact Us.
13. Lalu simpan widget tersebut dan lihat hasilnya :

TAMBAHAN (JIKA ANDA INGIN MENAMPILKAN CONTACT US NYA DIHALAMANNYA SAJA DAN TIDAK TERLIHAT DI HOMEPAGE ATAU SIDEBAR GUNAKAN CARA DIBAWAH INI)
14. kemudian klik Tema (Themes) yang ada dimenu kiri.
15. Lalu klik ikon segitiga yang ada disebelah tulisan Sesuaikan (Adjust) dan klik "Edit HTML".
16. Setelah itu lompat ke widget formulir kontak anda
17. Lalu ganti kode dari <bwidget id='contactform.............................hingga </bwidget>

 

dengan ini :

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='1'>
<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/>
Name
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
Email <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/>
Message <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='30' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='10'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='Send' 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:include name='quickedit'/-->
</b:includable>
</b:widget>

18. Kemudian simpan/save templatenya.

Versi Mobile:

1. Login ke blogger.
2. Di kiri atas klik ikon bergaris tiga "=".
3. Pada menu klik Tata Letak (Layout).
4. Lalu pilih dimana tempat yang ingin anda letakkan formulir kontaknya
5. Setelah itu klik "Tambahkan Gadget" dan cari yang namanya Formulir Kontak (Contact Form).
6. Lalu save/simpan gadget widget
7. Di kiri atas klik ikon bergaris tiga "=".
8. Kemudian klik Halaman di menu kiri
9. Lalu klik ikon bergaris tiga "=", dan klik Halaman Baru atau bisa juga dengan klik tombol "+".
10. Setelah itu tulis judul halamannya yaitu : Contact Us dan ubah Tampilan tulisan menjadi Tampilan HTML.
11. Lalu Copas (Copy-Paste/Salin-Tempel) kode berikut ke halaman tadi : (Jika kesulitan untuk memblok kodenya, download disini)

<div class="widget ContactForm" data-version="2" id="ContactForm1"><h1 style="text-align: left;"><span style="font-family: helvetica; font-size: large;"><u style="background-color: white;">
Contact-Form
</u></span></h1>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p></p><span style="background-color: white; font-family: helvetica;">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="20" type="text" value="" />
</span><p></p><span style="background-color: white; font-family: helvetica;">
Email
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
</span><p></p><span style="background-color: white; font-family: helvetica;">
Message
<br />
<textarea class="contact-form-email-message" cols="40" id="ContactForm1_contact-form-email-message" name="email-message" rows="20"></textarea>
</span><p></p>
<span style="background-color: white; font-family: helvetica;"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span>
<p></p>
<div style="max-width: 222px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
</div>
</div>

12. Kemudian publiskan halaman tersebut, dan salin url halaman tersebut.
13. Di kiri atas klik ikon bergaris tiga "=".
14. Kemudian klik Tata Letak di menu kiri.
15. Lalu tambahkan gadget halaman, kemudian klik TAMBAHKAN ITEM BARU dan pastekan url halaman tadi ke tulisan "Url Halaman", jangan lupa memberi nama halamannya yaitu Contact Us.
16. Setelah itu simpan widget tersebut dan lihat hasilnya :


TAMBAHAN (JIKA ANDA INGIN MENAMPILKAN CONTACT US NYA DIHALAMANNYA SAJA DAN TIDAK TERLIHAT DI HOMEPAGE ATAU SIDEBAR GUNAKAN CARA DIBAWAH INI)
17. Di kiri atas klik ikon bergaris tiga "=".
18. Kemudian klik Tema (Themes)di menu kiri.
19. Lalu klik ikon segitiga yang ada disebelah tulisan Sesuaikan (Adjust) dan klik "Edit HTML".
20. Setelah itu lompat ke widget formulir kontak anda
21. Lalu ganti kode dari <bwidget id='contactform.............................hingga </bwidget>

dengan ini :

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='1'><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/>
Name
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
<p/>
Email <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/>
Message <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='30' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='10'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='Send' 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:include name='quickedit'/-->
</b:includable>
</b:widget>

22. Kemudian simpan/save templatenya.