Cara membuat halaman kontak diblogspot

Dah lama gak bikin artikel....iseng iseng akhirnya buat artikel lagi.

Artikel saya kali ini gak terlalu berbobot namun saya rasa penting buat para pengguna blogspot yang belum memiliki halaman kontak diblognya.

Sebenernya udah banyak yang bikin tapi sepertinya yang buat tema baru blogspot belum ada ya🤔.

Kita mulai saja ya...O iya,saya mencoba membuat halaman kontak ini ditema blogspot terbaru yang saya gunakan saat ini.Yaitu CONTEMPO.Agar blog saya punya halaman khusus dengan formulir kontak tentunya.Ok langsung saja ya😊

Keuntungan memiliki halaman formulir "kontak kami" di blogger

Halaman kontak termasuk navigasi penting buat blog,karena halaman ini akan memberikan akses kepada pengguna blog untuk berinteraksi dengan pemilik blog.

Bayangkan jika anda tak memiliki formulir kontak dan ada pemilik sebuah advertising network yang ingin mengiklankan merk dagangnya diblog anda.Pihak advertiser pasti memiliki halaman kontak untuk menghubungi anda.

Bagaimana jika saya telah membuat form dari pihak ketiga?yang jadi pertanyaan saya,apakah pihak ketiga tersebut selalu berhubungan dengan anda?bagaimana jika tidak?Rejeki tak terduga tadi pasti hilang bukan? Nah maka dari itu ada cara yang lebih mudah membuat form kontak dihalaman statis blog tanpa harus meminjam jasa dari pihak ketiga untuk membuatnya,dan akan saya jabarkan sesaat lagi.Jadi baca terus ya sampai selesai....kalo perlu share ke medsos biar semua tau(😂ngarep😂).

Cara membuat form kontak dihalaman blog

O iya inget ya...saya menjajalnya pada tema CONTEMPO.Sebenarnya sih ini bisa berlaku pada semua tema blogger😊,asal anda teliti masalah koding.Yuk,kita mulai aja ya....

Langkah pertama ialah membuat widget contact diblogspot.Caranya sebagai berikut:
Buka dashbord blogger -> pilih tata letak -> add widget 
Anda bisa lihat pada gambar berikut:

Add gadget

Maka anda akan dibawa ke halaman pemilihan gadget seperti ini:

Add gadget

Jika mengikuti petunjuk gambar diatas maka anda akan dibawa ke halaman seperti ini:

Add gadget

Jika anda sudah berhasil menambahkan widget kontak maka akan tampil widget/gadget blog seperti gambar dibawah ini:

Add gadget

Langkah berikutnya adalah mengedit kode script html anda.Cara untuk mengedit kode html anda bisa anda lakukan di menu tema yang ada pada dasboard blogger seperti gambar berikut:

Edit html

Kemudian anda cari script seperti yang tertera pada kotak dibawah ini :

 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' version='2' visible='true'>
          <b:includable id='main'>
 
</b:includable>
          <b:includable id='content'>
  <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>

</b:includable>
        </b:widget>

Jika sudah ketemu script diatas maka yang perlu anda lakukan hanyalah menghapus script yang berwarna merah seperti yang sudah saya tandai diatas.Setelah anda selesai menghapus kode script yang dimaksud,silahkan anda simpan lalu keluar dari menu pengeditan.

Hampir selesai nih....

Langkah berikutnya silahkan anda buat sebuah halaman kontak dimenu halaman yang ada didashboard blogger lalu buat halaman baru kemudian pilih menu pengeditan menjadi html.Jika anda bingung  bagaimana cara membuat halaman baru dengan format html anda bisa lihat gambar berikut:


Klik saja tab html yang ditandai seperti gambar diatas.Jika sudah silahkan copy kode script dibawah ini dan paste kedalam halaman baru anda.

<table><tbody>
<tr><td>Nama</td> <td><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="20" type="text" value="" />
</td></tr>
<tr> <td>Email<span style="font-weight: bolder;"> *wajib diisi </span></td><td><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="20" type="text" value="" />
</td></tr>
<tr> <td>Pesan<span style="font-weight: bolder;"> *wajib diisi </span></td><td><textarea class="contact-form-email-message" cols="20" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
</td></tr>
<tr><td align="center" colspan="2"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
</td></tr>
<tr><td align="center" colspan="2"><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>
</td></tr>
</tbody></table>

Kemudian terbitkan....
Untuk mengetahui apakah halaman kontak diatas berhasil atau tidak silahkan anda kunjungi halaman tersebut dan isi semua kotak form lalu kirim....jika ada notifikasi diemail anda...selamat,halaman kontak anda telah berhasil anda buat...

Semoga bermanfaat....!!!


share this article to :

Comments

  1. Buat saya mah sangat bermanfaat om.

    ReplyDelete
    Replies
    1. 😊makasih mas...o iya apakah bahasanya terlalu bertele-tele tele mas?niatnya nanti mo saya update biar bahasanya lebih mudah dipahami...makasih dah mau mampir😊

      Delete

Post a Comment

Be smart,be polite,dont do spam act...comment wisely

LAGI NAIK DAUN

Fungsi audio processor sound system( aksesoris sound system )