Widget Contact Form Blogger - Tidak ada alasan pada sebuah blog tidak mempunyai form contact. Karena widget ini wajib dipasang karena siapa tahu para pengunjung ingin menanyakan sesuatu hal ataupun ingin berkirim pesan kepada anda pemilik blog.
Contact form juga diwajibkan untuk kelengkapan sebuah blog agar didaftarkan ke Google Adsense, karena kalau blog anda tidak mempunyai Contact Form sudah bisa bisa dipastikan anda akan ditolak sama Google Adsense.
Maka dari itu pentingnya kesadaran untuk sebuah blog mempunyai halaman kontak. Seperti pada artikel ini saya akan membahas cara memasang widget contact form blogger pada halaman statis. Biasanya kita temui contact form ini dipasang di widget sidebar ataupun di bagian footer blog. Tapi kali ini kita akan memasangnya di dalam halaman statis biar lebih menarik dan lebih efisien. Yuk mari kita simak caranya di bawah ini:
Baca Juga:
Memasang Widget Contact Form Blogger
- Login terlebih dahulu ke Blogger tercinta
- Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak.
- Lalu simpan dan biarkan saja Contact Form ada pada widget sidebar.
- Selanjutnya masuk ke Tema > Edit HTML
- Copy Paste kode di bawah ini tepat di atas kode
]]></b:skin>lalu simpan tema.
/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>- Perhatikan di menu pilihan sebelah kanan. Pilih tekan "Enter" untuk baris baru
- Klik Selesai lalu Publikasikan.
Demikian artikel ini memasang Widget Contact Form Blogger, semoga bermanfaat dan bisa dipraktekkan di blog anda.
Sumber: Kang Ismet
