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">
#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.
Judul : Cara Memasang Widget Contact Form Blogger di Halaman Statis
Deskripsi : Cara Memasang Widget Contact Form Blogger Pada Halaman Statis - Widget Contact Form Blogger ini adalah widget bawaan dari blogger dan tern...
