BLOGGINGPASURUAN datang lagi dengan tips baru yaitu Cara membuat Contact Form pada Halaman Statis Blog. Saya akan jelaskan sedikit mengenai tutorial disini, Halaman statis masih membutuhkan widget bawaan BLOGGER namun widget yang sudah kita tambahkan pada prosedur " Tambah gadget " tidak bisa kita hapus ( namun bisa kita sembunyikan hiden ).
Langsung saja simak tutorial berikut ini :
1.Masuk ke akun Blogger Anda
2.Pada Dasbord >>> Klik Laman ( Page ) >>> Klik Laman Baru (New Page )
3. Pilih HTML ( Jangan compose ). Lalu copy dan pastekan kode di bawah ini :
HTML
<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' 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' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; 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>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' 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' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; 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>
4.Lihat Gambar dibawah ini
Catatan :
>>> 1. Masukan code no.3 ( pilih HTML )
>>> 2. Lalu copy dan pastekan.
>>> 3. Klik/pilih " Jangan ijinkan komentar xxxxx "
>>> 4. Publikasikan
Ok.... sampai disini dulu untuk langkah pembuatan halaman-nya. ( masih ada proses berikutnya )
5. Proses berikutnya Anda masuk ke Template ( lihat gambar bawah )
>>> Masuk Template lalu tekan Edit HTML
>>> Lalu masuk di JUMP WIDGET atau ( lompat widget )
>>> Pilih Contact Form1
6. Setelah Anda Klik maka akan Tampil seperti gambar di bawah ini :
>>> Klik Pada Tanda Panah warna hitam ( yang menunjukkan widget Contact Form1 )
7. Akan Muncul seperti gambar dibawah ini :
>>> Klik pada tanda panah warna hitam yang menunjuk <b:includable....
8. Kemudian akan muncul seperti pada gambar berikut :
>>> Anda blok kode seperti tampak pada gambar diatas ( pada template Anda ).
>>> Lalu Hapus ( atau tekan backspace ) Cara Ini akan membuat Widget Contat Form tidak tampak pada Template Blog Anda nantinya.
9. Setelah di Hapus akan tampak seperti pada gambar dibawah ini :
10. Lalu Save
Sekarang Anda Kembali pada menu LAMAN "Kontak Form" yang Anda buat pada Langkah No. 4 tadi.
>>> Klik/Tekan LAMAN (Page)
>>> Setelah muncul Judul Laman " Contact " ( yang Anda buat tadi )
>>> Tekan View ( Lihat )
>>> Maka akan Muncul Jendela baru Kontak Form Anda Catatan : Lihat " LINK URL " pada Adress bar
misalnya : http://www.namabloganda.com/2014/05/kontakform_Anda .html
11. Anda masuk lagi ke Template >>> Edit HTML
>>> Setelah masuk tekan CTRL+F masukan tulisan Contact >>> lalu tekan Enter
>>> Biasanya Anda akan menjumpai kode HTML kontak tersebut tanpa Link URL kontaknya
Contoh < href:" #" > Contact </a>>>> Naaa Masukkan link url kontak Anda /Ganti pada " # "
12. Lalu Simpan " SAVE " Selesai ... ( finish )
Sekarang Anda sudah memiliki halaman kontak form statis pada Blog Anda.
Semoga bermanfaat.............