Cara Membuat Contact Form di Blogger
pasang contact form pada halaman statis blogger
Harianto.tk-Pernah melihat sebuah contact form ? ya biasanya contact form merupakan sebuah layanan untuk website jual-beli profesional kan ?
tapi jangan salah blogger juga bisa membuat contact form loh ! tidak percaya ? silahkan kunjungi link blog carnival saya
http://www.harianto.tk/p/carnival.html
Tertera jelas di bawah situ terdapat contact form bukan ? nah sebenarnya blogger sendiri sudah mempunya widget contact form namun hanya dapat di pasang di side bar dan kebanyakan orang tidak menyukai itu mereka lebih memilih menempatkan contact form pada halaman statis atau halaman posting(termasuk saya hehe) jadi artikel kali ini akan membahas
bagaimana Cara Membuat Contact Form di Blogger
urutan tata cara yang harus dilakukan
- add gadget contact form
- buat halaman statis/halaman posting untuk contact form
- modifikasi widget contact form di html
cukup sederhana bukan ? langsung saja prakteknya
Sebelum memulai alangkah baiknya save template anda agar tidak terjadi hal yang tidak di inginkan ! !
langkah ke-1 Tambahkan widget/gadget contact form ke blog anda
untuk sementara biarkan saja seperti itu
Langkah ke-2 masukan code html berikut di halaman statis untuk contact form anda
- Untuk menambahkannya, masuk ke Laman - Laman baru - Laman kosong. Tambahkan kode dibawah ini pada mode HTML bukan
Compose
<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>
- selanjutnya pada menu pilihan(pojok kanan paling bawah) pilih tekan "Enter" untuk baris baru
Langkah ke-3 menyembunyikan widget contact form di sidebar dan menambahkan css kedalam kode
]]></b:skin>
template-edit html(gunakan ctrl+f untuk mempermudah)-
]]></b:skin>
paste kan kode dibawah ini tepat di atas kode ]]></b:skin>
/* 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; }
Klik save selesai
semoga artikel ini bermanfaat -
bantu saya menjadi penulis yang lebih baik dengan share artikel ini kepada teman-teman anda
terima kasih-
Harianto.tk
Artikel keren lainnya:
Terimaksih atas tutorialnya, sudah saya praktekan untuk membuat halaman kontak blog saya, dan alhamdulillah sudah berhasil
ReplyDeleteiya sama sama :) jangan bosen bosen mampir yah :)
Delete