Cara Memasang Widget Contact Form Blogger di Halaman Statis

Cara Memasang Widget Contact Form Blogger Pada Halaman Statis - Widget Contact Form Blogger ini adalah widget bawaan dari blogger dan ternyata widget ini adalah widget yang baru saja dirilis akhir - akhir ini oleh team Blogger.com.

Pada kesempatan kali ini saya akan memberikan penjelasan tentang Cara Memasang Widget ini di halaman statis, kenapa anda ingin memasang di halaman statis? iya, karena widget ini jika di pasang di sidebar tampilannya akan nggak etis sekali menurut saya.

Widget Contact Form Blogger Pada Halaman Statis.

Langkah 1: Tambahkan Widget Contact Form Blogger.
Untuk menambahkan silahkan anda masuki halaman Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Contact.

Untuk sementara biarkan widget Contact Form Blogger ini berada pada halaman sidebar anda.

Langkah 2: Tambahkan Halaman.
Untuk menambahkan halaman silahkan anda masuk ke Laman ► Laman Baru ► Laman Kosong. Copy kode dibawah ini dan paste-kan tepat di form Laman kosong anda dalam 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>

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

Lalu tekan Publikasikan.

Langkah 3: Menyembunyikan Widget dari Halaman Sidebar Menggunakan CSS.
Tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>.

#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;
}

Selesai, klik Save Template kemudian lihatlah hasilnya.

Sebelum menutup acara pada postingan Cara Memasang Widget Contact Form Blogger di Halaman Statis, saya sangat berterimakasih kepada Kang Ismet http://blog.kangismet.net atas tutorial - tutorial yang ia berikan sangatlah bermanfaat. Salam Hormat.