Searching...
Home , → Cara Membuat Halaman Contact Form Simple Di Blog

Cara Membuat Halaman Contact Form Simple Di Blog

Monday, July 28, 2014
Cara Membuat Halaman Contact Form Simple Di Blog - Seperti yang kita tahu bahwa widget contact form memanglah penting untuk sebuah blog sebagai piranti komunikasi yang bersifat privat. Untuk membuat contact widget dengan tampilan yang sederhana saja bisa mengikuti langkah-langkah dibawah. Cara penerapannya kedalam halaman statis blog langkah-langkahnya sama seperti pada tutorial sebelumnya, untuk membuat widget contact form supaya bisa berfungsi dengan baik harus terlebih dahulu menambahkan contact widget yang asli (default widget contact form blogger) kemudian kita bisa menyembunyikan atau tidak menampilkan widget contact tersebut dengan menambahkan kode CSS lalu kemudian kita bisa merubahnya menjadi tampilan contact widget yang lebih menarik. Berikut langkah-langkah cara Memasang Widget Contact Form di Halaman Statis Blog.

Cara Membuat Halaman Contact Form Simple Di Blog
Cara Membuat Halaman Contact Form Simple Di Blog
1. Login akun blogger.
2. Masuk Tata Letak > Tambah widget > Gadget Lainnya > Formulir Kontak, lalu klik Simpan.
3. Selanjutnya klik Template lalu Edit HTML untuk menyembunyikan widget lama dan mengganti dengan tampilan widget baru.
4. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin> kemudian Simpan template.
#formcontact { margin:0 auto; width:390px; height: 380px; background:#222222; position:relative; border:1px solid #262626; }
#formcontact h3 { color:#ffffff; font:bold 20px verdana; text-transform:uppercase; text-align: center; padding:5px 0 5px 15px; background:#222; border-bottom: 1px double #333; border-top: 1px double #111; margin:10px 0px; }
#ContactForm1_contact-form-name { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email-message{ margin:0px 10px 10px 10px; padding:7px 7px; width:355px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; overflow:hidden; height:150px; color:#ffffff; }
#ContactForm1_contact-form-submit{ margin:0px 10px 10px 10px; padding:4px 7px; background:#CC0000; position: relative; cursor:pointer; float:right; width:100px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left:1px double #FF0033; border-right:1px double #FF0033; }
#ContactForm1_contact-form-submit:hover { background:#ff0000; }
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 250px; margin-top:10px; }
#ContactForm1 {display:none}
5. Copy kode berikut ini lalu klik Laman > Laman Baru > Laman Kosong kemudian paste kode tersebut pada halaman statis HTML.
<div id="formcontact">
<h3>Contact Form</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 250px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
6. Langkah terakhir klik Publish.

Selesai sudah dan demikian tutorial untuk menerapkan widget contact form ke dalam halaman statis blog.
Advertise Here
ironicament.blogspot.com
300x250

3 Komentar Untuk "Cara Membuat Halaman Contact Form Simple Di Blog"

Hallo admin, apakah cara yang sama juga berlaku untuk blog wordpress ? kemudian apakah pesan yang dikirimkan seseorang melalui form kontak akan muncul di dashboard atau di email pribadi kita ? makasih. salam :)

Balas

keren.......thaks
http://indonesia-furniture.net/

Balas

keren gan thanks ya

http://www.mastahbloging.com/

Balas

Jangan Spam Ya Gan, Komentar Yang Relevan. Pasti Admin Tanggapin kok.
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terimakasih atas komentar Anda di "Cara Membuat Halaman Contact Form Simple Di Blog"