Iklan

Cara Memasang WIDGET CONTACT FORM di Halaman Statis Blog

Cara Memasang Widget Contact Form di Halaman Statis Blog


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 )

Cara Memasang Widget Contact Form di Halaman Statis Blog

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>


4.Lihat Gambar dibawah ini 

Cara Memasang Widget Contact Form di Halaman Statis Blog
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 )

Cara Memasang Widget Contact Form di Halaman Statis Blog


>>> Masuk Template lalu tekan Edit HTML 
>>> Lalu masuk di JUMP WIDGET atau ( lompat widget )
>>> Pilih Contact Form1

Cara Memasang Widget Contact Form di Halaman Statis Blog

6. Setelah Anda Klik maka akan Tampil seperti gambar di bawah ini :

Cara Memasang Widget Contact Form di Halaman Statis Blog

>>> Klik Pada Tanda Panah warna  hitam ( yang menunjukkan widget Contact Form1 )

7. Akan Muncul seperti gambar dibawah ini :

Cara Memasang Widget Contact Form di Halaman Statis Blog

>>> Klik pada tanda panah warna  hitam yang menunjuk <b:includable....

8. Kemudian akan muncul seperti pada gambar berikut :

Cara Memasang Widget Contact Form di Halaman Statis Blog

>>> 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 :

Cara Memasang Widget Contact Form di Halaman Statis Blog

10. Lalu Save

Sekarang Anda Kembali pada menu LAMAN "Kontak Form" yang Anda buat pada  Langkah No. 4 tadi.

Cara Memasang Widget Contact Form di Halaman Statis Blog

>>> 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.............



Next
Prev Post
Previous
Next Post

3 comments:

  1. Keep smaiiillleeeeeeeee kakak hahahaaaa

    ReplyDelete
  2. Makasih kak, sangat membantu saya

    ReplyDelete
  3. makasih pak, sangat membantu sekali ^_^
    www.kompigames.com

    ReplyDelete