Home  ›  Widget

Cara Memasang Contact Form Blogger

Written By PENDIDIDKAN Tuesday, September 16, 2014 Add Comment Edit
Widget Contact Form Blogger statis - pada kesempatan ini saya akan menuliskan widget contak form contaact statis, form ini penempatannya dihalaman statis atau postingan. form contact merupakan terjadinya contact sosial, form contak berbentuk sederhana namun namun fungsinya sangat besar karena dapat berkomunikasi langsung dan dapat menjalin kerjasama dengan orang lain.




Sekarang saya akan menjelaskan bagaimana memasang Widget Contact Form Blogger ini pada halaman statis atau pada postingan. Penampakan contact form ini seperti screenshoot di bawah ini :

Tambahkan Widget Contact Form Blogger
 Untuk menambahkannya:
► Anda Login ke akun Blogger
► Pilih Layout/Tata letak
► Tambahkan Gadget
► Klik Gadget Lainnya
► Pilih Formulir kontak




Keterangan :
Untuk sementara Biarkan contact form ada di widget / sidebar.


Tambahkan Halaman
Untuk selanjutnya penambahan halaman, untuk penambahannya
► Kelaman baru
► Laman kosong

<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>

Keterangan :
Tambahkan kode dibawah ini pada mode HTML bukan Compose


Pada Menu Pilihan, pilih Tekan "Enter" untuk baris baru.




Meyembunyikan Widget dan Menambahkan CSS

Langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form agar lebih menarik. anda buka Editor template Tambahkan kode ini di atas ]]></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;
}

Demikian Cara Memasang Widget Contact Form Blogger pada Halaman Statis , semoga bermanfaat!

0 Response to "Cara Memasang Contact Form Blogger"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel