Memasang widget Contact form di halaman statis

Widget

Sebelumnya, saya telah memposting artikel tentang memasang Formulir Kontak Blogger di link ini. Formulir kontak blogger ini bisa disesuaikan dengan mudah. Anda juga dapat menambahkan formulir ini ke dalam halaman statis blog Anda atau posting dengan beberapa langkah sederhana.


Tambahkan Form Kontak Untuk Blog Anda:

Anda dapat menambahkan formulir kontak ini ke sidebar blog Anda dengan membaca tutorialnya  disini. Catatan: Anda harus memiliki gadget ini pada sidebar tau element lainnya agar Anda bisa menambahkan widget formulir konta ini ke halaman statis blog Anda.

Menyembunyikan Formulir Kontak Dari Sidebar Anda:

Sekarang Anda harus menyembunyikan gadget ini dari situs/blog Anda, sehingga hanya akan tersedia pada halaman kontak situs Anda saja. berikut ini langkahnya:

Login ke akun Blogger> Template> Edit HTML

Cari dan sisipkan kode ini hanya di atas kode tag ]]> </ b: skin>:

#ContactForm1{
display: none ! important;
}

Simpan template Anda. Sekarang untuk langkah terakhir:

Menambahkan Kontak di Sebuah Halaman Statis:

Buka dashboard blogger anda pilih laman > laman baru > laman kosong
Lalu buka tab html di samping tab compose pada editir post laman
Kemudian copy dan pastekan kode di bawah ini di dalamnya:

<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' 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' value='Send' type='button' />
<p></p>
<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>

Pratinjau untuk melihat hasil, untuk menerbitkan klik publikasikan.

Selesai, berikutnya saya akan memberi trik untuk menambahkan css di contact form blogger jadi tunggu saja :)

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...