Cara Membuat Halaman Hubungi Kami di Blog (Contact Us)

Sedang Trending 2 tahun yang lalu

MATERI PENDUKUNG

Apa itu Halaman Contact Us?

Halaman Contact Us alias Halaman Hubungi Kami adalah nan berisi info alias blangko kontak blog. Halaman contact us bisa dikatakan sebagai salah satu laman nan kudu tersedia pada blog. Terlebih lagi jika blog nan Anda kelolah merupakan media pemasaran produk anda. Dengan adanya laman kontak ini, pembaca blog bisa dengan mudah menghubungi Anda mengenai perihal apapun nan terdapat pada blog.

Cara Membuat Halaman Contact Us

Pemasangan Widget

  1. Masuk ke Tata Letak blog, Klik Tambahkan gadget pada salah satu section (boleh dimana saja).
  2. Pada Jendela opsi widget, pilih jenis widget Formulir Kontak - (Lihat). Untuk konfigurasi pada Jendela konfigurasi widget, biarkan secara default.
  3. Pastikan pemasangan widget pada tata letak sudah selesai. Anda bisa meletakkan widget ini dimana saja. Widget ini pada akhirnya tidak bakal ditampilkan. Fungsi dari penambahan widget ini hanya sebagai trigger (aktivasi) script kontak blogger - (Lihat).

Mengganti Kode Widget

  1. Masuk ke XML Editor, cari text ContactForm1. Anda bakal dibawa pada baris kode widget nan tadi ditambahkan - (Lihat).
  2. Ganti semua kode widget diatas dengan Kode Widget Baru dibawah - (Lihat).

    Kode Widget Baru

    <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='2' visible='true'> <b:includable id='main'> <b:attr name='id' value=''/> <b:attr name='class' value=''/> <b:attr name='style' value='display:none'/> </b:includable> <b:includable id='content'> <!--removed--> </b:includable> </b:widget>
  3. Simpan perubahan

Membuat Halaman Statis

  1. Masuk ke Laman Editor untuk membikin laman tetap baru. Beri titel Contact Us alias Hubungi Kami.
  2. Beralih ke Tampilan HTML, Copy dan Paste HTML Formulir Kontak di bawah sebagai konten laman. Atur juga untuk tidak mengaktifkan komentar pada laman ini - (Lihat).

    HTML Formulir Kontak

    <p>Tambahkan text pembuka untuk blangko kontak jenis Anda sendiri disini</p> <br/> <br/> <!-- Contact Form by wiBlogger.com --> <style type='text/css'> .contact-form-field{margin-bottom:20px;} .contact-form-field-message{margin-bottom:0;} .contact-form input, .contact-form textarea{border:1px solid #e0e0e0;border-radius:3px;} .contact-form-label{margin:0 0 10px 0;} .contact-form-label span{color:red;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email { width: 300px; height: 20px; max-width: 95.5%; padding: 2%; } #ContactForm1_contact-form-email-message { width: 93.5%; height: 150px; padding: 3%; resize: none; } #ContactForm1_contact-form-submit { border:none; padding:10px 30px; font-size:20px; background:#3bbd1b; color:#fff; margin-top:20px; border-radius:3px; width:auto; font-size:15px; font-family:inherit; } #ContactForm1_contact-form-error-message { text-align:center; padding:0px 20px; margin-top:15px; color:#D41C1C; } #ContactForm1_contact-form-error-message img { display:none; } </style> <div class='widget contact-form ContactForm' data-version='2' id='ContactForm1'> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <div class='contact-form-field contact-form-field-name'> <div class='contact-form-label'> Nama </div> <div class='contact-form-input'> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> </div> </div> <div class='contact-form-field contact-form-field-email'> <div class='contact-form-label'> E-mail <span>*</span> </div> <div class='contact-form-input'> <input placeholder="Email jawaban bakal dikirim ke sini" class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> </div> </div> <div class='contact-form-field contact-form-field-message'> <div class='contact-form-label'> Pesan <span>*</span> </div> <div class='contact-form-input'> <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='Kirim Pesan'/> </div> </div> <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> </form> </div> </div> </div>
  3. Selesai. Terbitkan halaman. Hasil dari HTML di atas kurang lebih seperti berikut:

    cara membikin laman kontak blogger

Selengkapnya
Sumber Info Blogging Wiblogger
Info Blogging Wiblogger