Cara Buat Form Contact Us Sederhana Pada Blog Blogger


Form Komentar pada blog merupakan fitur penting untuk pengalaman pengguna blog atau situs anda. Sebagian besar mereka pada blogger menggunakannya untuk dijagikan syarat untuk mengirimkan pengajuan adsense google. Kegunaan umumnya memang untuk pasilitas atau fitur bagi pengunjung blog anda jika ada seputar pertanyaan-pertanyaan pada blog atau situs anda.
Buat Contact Us Sederhana
Jika anda ingin membuatnya, silahkan ikut langkah-langkah berikut dibawah ini. Dan perhatikan baik-baik khususnya bagi para blog pemula karena cara ini sangat berbahaya, bercanda bro. hhe..

Pertama-tama anda harus menempelkan kode dibawah ini pada laman Contact Us anda dibagian HTML laman. Lakukan peninjauan terlebih dahulu, setelah semua tampil dengan baik, silahkan tekan publikasikan.
Buat Contact Us Sederhana
<div class="contact-form">
<div class="form">
    <br />
<div class="contact-title">
Formulir Komentar
    </div>
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" />
    <br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}" onfocus="if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Email ID" />
    <br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" value="Leave Your Message.."></textarea>
    <br />
<input class="contact-form-button contact-form-button-submit button-color" type="reset" value="Clear" />
    <!-- Send Button -->
    <input class="contact-form-button contact-form-button-submit button-color" id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <br />
<br />
<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>
</form>
</div>
</div><!-- End Code HTML Contact Form By AK NEW SITE -->
<style> .contact-form { border: 3px dashed #7a7a7a; background:#fff; font:11px arial; width:100%; max-width:350px; margin:0px auto; padding:20px;}.contact-title { margin:0 0 5px 0; padding:10px; font:20px Oswald; text-align:center; color:#fef4e9; background:#00888D; }.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:350px; width:100%; }.contact-form-name { background:#fff; display:inline-block; font-family:Arial,sans-serif; font-size:12px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding: 0px 0px 0px 10px; }.contact-form-email {background:#fff; display:inline-block; font-family:Arial,sans-serif; font-size:12px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding: 0px 0px 0px 10px;}.contact-form-email:hover,.contact-form-name:hover { padding:0px 0px 0px 10px; }.contact-form-email-message:hover { padding:10px; }.contact-form-email-message {color:#726767; display:inline-block; font-family:arial; font-size:12px; margin:0; margin-top:5px; padding:10px; max-width:350px !important; height:160px; border-radius:5px; }.contact-form-button { display:inline-block; vertical-align:baseline; margin:0 5px; outline:none; text-align:center; text-decoration:none; padding:5px; margin-top: 5px; cursor:pointer; height:35px;border:none; }.contact-form-button:hover { text-decoration:none; }.contact-form-button:active { position:relative; top:2px; }.button-color { font:13px Oswald; color:#fff; background:#00888D; }.button-color:hover { background:#e38000 }.button-color:active { color:#e38000 }
    </style>
Setelah itu, agar semuanya bekerja dengan baik, silahkan tambah gadget Formulir Kontak pada bagian Tata Letak.
Buat Contact Us Sederhana 

Agar tampilan gadget Formulir Kontak tidak tampil pada laman utama blog, silahkan pergi ke bagian Template dan Edite HTML. Lalu cari kode seperti dibawah ini :
  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
HAPUS BAGIAN KODE INI
    </b:includable>
  </b:widget>
</b:section>
Pada yang saya beri keterangan Hapus Bagian Kode Ini, silahkan hapus kode yang dibawah kode  <b:includable id='main'> sampai kode penutup </b:includable>. Untuk lebih tepatnya anda tinggal lihat pada bagian gambar dibawah ini.
Buat Contact Us Sederhana 
 Kemudian anda tinggal tekan simpan, dan lihat hasilnya. Lakukan saja pengetesan kirim email, lalu lihat pada kontak pesan email google anda yang anda gunakan pada blogger.


No comments:

Sebelum menuliskan komentar, Anda harus baca syarat dibawah ini :
1. Tidak diperbolehkan menaruh link aktif,
2. Tidak boleh ada unsur huru hara dan pornograpi,
3. Jika membuat spam, komentar Anda akan dihapus, dan
4. Silahkan bertanya dan berbagi pikiran dengan kalimat yang baik dan membangun.

AK NEW SITE. Powered by Blogger.