Cara Membuat Halaman Kontak Kami di Blogger

Halaman kontak dalam sebuah blog adalah salah satu kelengkapan sebuah blog, halaman kontak nantinya dapat digunakan sebagai sebuah kritik dan saran terhadap sebuah kepuasan pengunjung blog terhadap blog itu sendiri agar kita sebagai admin dapat menigkatkan apa yang di inginkan pengunjung atau dapat juga digunakan sebagai alat komunikasi pengunjung yang ingin menanyakan tanpa di publikasikan.

Khusus untuk blog dengan platform blogger atau blogspot kita bisa membuat halaman kontak dengan cukup mudah menggunakan widget kontak form. Sebetulnya widget kontak form ini bisa ditaruh dimana saja sebagai widget seperti disamping atau dibawah, namun kebanyakan blogger menginginkan halaman kontak yang dibuat tersendiri.

Berikut ini step by step membuat halaman kontak pada blogger menggunakan widget kontak form :

Baca Juga

1. Pilih Tata Letak pada menu kiri lalu Tambahkan Gadget disembarang lokasi (bebas).

Cara Membuat Halaman Kontak Kami di Blogger

2. Pada halaman Tambahkan Gadget pilih Gadget Lainnya Lalu pilih Formulir Kontak.

3. Simpan tata letak dengan pilih Simpan Setelan.

4. Buat halaman baru dengan cara klik menu Laman lalu pilih Laman Baru.

5. Isi Laman baru dengan kode berikut :

<form name="contact-form">
<p></p>
Nama
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text">
<p></p>
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>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button">
<p></p>
<div style="text-align: center; max-width: 222px; 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>

6. Berikut ini contoh tampilan kode html halaman kontak kami.

7. Atur opsi jangan ijinkan komentar lalu Publikasikan halaman.
8. Pilih Menu Template lalu pilih Edit HTML.

9. Pilih Lompat ke Widget ContactForm1.

10. Hapus kode diantara <b:includable id='main'> dan </b:includable> didalam widget ContactForm1

11. Jika benar akan tampil seperti ini:

12. Cari kode ]]></b:skin> kemudian tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>.

.contact-form-name, .contact-form-email { max-width: 200px; width: 100%; } .contact-form-email-message { max-width: 400px; width: 100%; height: 150px; }

13. Perhatikan contoh berikut ini :

14. Simpan template dan halaman kontak kami telah berhasil dibuat.

15. Selanjutnya tinggal menambahkan link ke halaman Kontak kami pada menu dan selesai.

Bagimana cukup bingungkah, prosesnya memang lumayan panjang tetapi jika ingin yang simpel tinggal pakai saja widget yang sudah jadi nanti akan saya bahas di postingan berikutnya. Semoga tutorial ini dapat membantu dan bermanfaat.