New Blogger Widget: Bentuk Kontak - Ganti Style & Install Di Halaman Statis

Hanya beberapa hari yang lalu, Blogger memperkenalkan widget baru. Ini adalah tentang formulir kontak yang dapat Anda tambahkan ke blog Anda dengan mudah. Hal ini sangat mendasar, karena - setidaknya untuk saat ini, tidak mengizinkan file menggabungkan atau mengirim apa pun selain teks biasa. 

Formulir kontak untuk Blogger memiliki beberapa fitur berikut: 

• Lapangan untuk nama pengguna
• Lapangan untuk email
• Lapangan untuk pesan (textarea)
• Kirim Tombol

Screenshot

Desainnya sederhana dan warna teks mewarisi bagian di mana Anda menambahkannya. Pada saat ini, widget ini tidak memiliki opsi konfigurasi dan tidak tersedia untuk dilihat dinamis. 

BAGAIMANA TAMBAHKAN FORMULIR KONTAK UNTUK BLOGGER

Untuk menambahkannya ke blog Anda, cukup pilih tab Layout, kemudian klik pada Tambah gadget di bagian Anda ingin menunjukkan, misalnya, di sidebar. Kemudian, pilih tab gadget lainnya dan menambahkan gadgetForm Contact. 

Styling Contact Form

Sebagai latar belakang transparan, formulir akan mengintegrasikan dengan baik, estetis berbicara, namun demikian itu adalah mudah untuk memodifikasi menggunakan Style Sheets (CSS) untuk pemilih yang sesuai.Berikut ini adalah contoh: 

 / * Formulir Kontak Wadah * /
. Contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: # F8F8F8;
color: # 000;
border: 1px solid # C1C1C1;
box-shadow: 0 1px 4px RGBA (0, 0, 0, 0.25);
border-radius: 10px;
}

/ * Bidang dan tombol submit * /
. Contact-form-nama,. Contact-form-email,. Contact-form-email-pesan {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/ * Tombol Submit gaya * /
. Contact-form-tombol-menyerahkan {
border-color: # C1C1C1;
background: # E3E3E3;
color: # 585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/ * Tombol Submit pada mouseover * /
. Contact-form-tombol-menyerahkan: hover {
background: # 4C8EF9;
color: # ffffff;
border: 1px solid # FAFAFA;
}

Ini adalah bagaimana hal itu akan terlihat seperti setelah menerapkan gaya:

Untuk menambah gaya ini, pergi ke Template> Edit HTML, klik pada tanda panah ke samping sebelah <b:skin> ... </ b: skin> dan paste kode hanya]]> </ b di atas: skin> (tekan CTRL + F untuk menemukannya): 

Cara Tambah Contact Form Dalam Halaman Statis

Langkah pertama adalah dengan menambahkan gadget Contact Form (Layout) dan kedua, untuk mengedit template (Template> Edit HTML) untuk menghapus sebagian besar gadget. Anda harus mencari id "ContactForm", memperluas widget dengan mengklik tanda panah hitam di sebelah kiri (sama dengan includable) dan kemudian menghapus bagian yang saya berwarna merah (lihat di bawah): 

Bagian yang akan dihapus: 

 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
id='main'> <b:includable
<b:if cond='data:title != ""'> 
<h2 class='title'> <data:title/> </ h2> 
</ B: if> 
<div class='contact-form-widget'> 
<div class='form'> 
<form name='contact-form'> 
<p/> 
<data:contactFormNameMsg/> 
<br/> 
<Class input = 'contact-form-name' expr: id = 'Data: widget.instanceId + "_contact-bentuk-name"' name = 'name' size = 'type =' text '30 'value ='' /> 
<p/> 
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'> * </ span> 
<br/> 
<Class input = 'contact-form-email' expr: id = 'Data: widget.instanceId + "_contact-bentuk-email"' name = ukuran 'email' = '30 'type =' text 'value ='' /> 
<p/> 
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'> * </ span> 
<br/> 
<Class textarea = 'contact-form-email-pesan' cols = '25 'expr: id =' Data: widget.instanceId + "_contact-form-email-pesan" 'name =' email-message 'baris =' 5 '/> 
<p/> 
<Class input = 'contact-form-tombol kontak-form-tombol-submit' expr: id = 'Data: widget.instanceId + "_contact-form-submit"' expr: 'Data: contactFormSendMsg' value = type = ' tombol '/> 
<p/> 
<div style='text-align: center;"> max-width: 222px; width: 100%'> 
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> 
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> 
</ Div> 
</ Form> 
</ Div> 
</ Div> 
<b:include name='quickedit'/>
</ B: includable>
</ B: widget>

Setelah Anda menyimpan template, pergi ke Pages dan paste kode berikut ke dalam halaman kosong baru dengan judul yang Anda inginkan: 

 <div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
Nama yang ditayangkan
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p> E-mail * </ p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p> Pesan * </ p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'> </ textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'> </ p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'> </ p>
</ Form>
</ Div>
</ Div>
</ Div>

Pesan akan dikirim ke email yang sama yang telah Anda daftarkan di Blogger. 

Berikut adalah halaman demo di mana Anda dapat mengujinya (itu adalah account yang saya tidak menggunakan, jadi jangan berharap balasan). 


Itu saja! Jika Anda memiliki pertanyaan atau komentar silahkan posting di bawah ini.