Wednesday, March 1, 2017

Cara Mudah Membuat Form Contact Us di Blogger

Laman contact us / hubungi kami di sebuah blog memanglah penting, agar para visitor / pengunjung blog dapat berinteraksi secara lebih personal dengan pemilik blog, untuk bertanya tentang konten-konten yang berhubungan dengan blog tersebut ataupun untuk memberikan saran dan masukan kepada pemilik blog agar blog dapat berkembang lebih baik.

untuk membuat form contact us / hubungi kami, banyak website yang memberikan kemudahan kepada para pemilik blog untuk dapat memberi kolom contact us di blog , tanpa harus susah-susah membuat coding dan program, anda hanya perlu mendaftar akun di website penyedia form contactus dan menempatkan widget yang di berikan di halaman blog anda.

tetapi apa anda tau bahwa sebenarnya blogger sendiri sudah memberikan fasilitas contact us untuk blog yang dibuat menggunakan blogger. hanya saja contact us bawaan blogger ini berupa widget sehingga akan tampil di semua halaman web bukan pada satu halaman tertentu yang akan terbuka saat kita mengklik tombol contact us, hal inilah yang membuat para pengguna blogger jarang menggunakan fitur contact us dari blogger.



pada tutorial kali ini, kita akan membuat widget contact us bawaan blogger ini, hanya tampil di satu laman page saja, tidak tampil di semua halaman blog. kita akan membuatnya dengan sedikit penambahan code html pada template blog. langsung saja berikut langkah-langkah membuat form contact us langsung dari blogger

1. masuk ke akun blogger anda seperti biasa
2. pada menu Tata Letak buat gadget baru
3. pada jendela tambahkan gadget masuk menu lainnya kemudian pilih Contact Form, beri judul sesuka ada bisa contact us atau hubungi kami atau kata yang lainnya, kemudian simpan


Contact us form


( Lihat Juga Tutorial Blogger Lainnya di Daftar Isi Sinauyuk.com )

4. Langkah selanjutnya kita perlu menghilangkan tampilan form contact ini di halaman blog. caranya adalah pada dashboard blogger masuk ke menu template klik Sesuaikan / Costumize.


contact us form


5. pada halaman penyesuaian template klik menu Lebih Lanjut,  pada kolom di sebelah kanan nya scroll sampai ke bawah pilih Tambahkan kode CSS. copy kode berikut ke kolom tambahkan css kemudian klik Terapkan ke blog ada di pojok kanan atas

.widget.ContactForm {
display: none;
}

contact us form


6.sekarang form contact sudah tidak terlihat di semua halaman blog, untuk dapat menempatkannya pada halaman tertentu sekarang buat laman baru di blog anda, pindah menu compose ke mode HTML. copykan kode berikut

<div class='form'>
<!-- Custom Formulir Kontak Original MBT by bloGoooblok ~ -->
<form name='contact-form'>
<!-- Nama -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Nama" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Pesan -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Kirim'/>
<p></p>
<!-- Validation -->
<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>
<!-- Custom Formulir Kontak Original MBT by bloGoooblok ~Ends -->
</div>


( Baca Juga : Cara Membuat daftar artikel terkait di blogger )

7. halaman contact us/hubungi kami sudah jadi tingga masalah penempatan anda bisa menempatkan Laman/page tersebut di menu blog ataupun di attribusi

( Baca Juga  :  Menempatkan Laman / Page di Menu Blog )

** Untuk tampilan Contact Form seperti di blog ini silahkan lihat script style nya di Blogooblok.com

jika ada yang ingin ditanyakan silahkan tulis di kolom komentar. Selamat mencoba dan teruslah belajar,,


Jika menurut anda artikel ini bermanfaat silahkan share di media sosial anda, Terimakasih.
Share/Bagikan ke :


Tampilkan Komentar

0 komentar