Windows Blue Free | Cara Pasang Widget Baru Blogger : Formulir Kontak - Mengubah Gaya & 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 memasukkan file 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 (area teks)
- Kirim Tombol
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 ke Blogger
Untuk menambahkannya ke blog Anda, cukup pilih tab Layout, kemudian klik Add a gadget di bagian yang ingin ditampilkan, misalnya, di sidebar. Kemudian, pilih tab More gadget dan tambahkan Contact Form gadget.
Menata Formulir Kontak
Sebagai latar belakang transparan, formulir akan mengintegrasikan dengan baik, estetis berbicara, namun demikian mudah untuk memodifikasi menggunakan Style Sheets (CSS) untuk penyeleksi yang sesuai. Berikut ini contohnya:
___________________________________________
/ * Formulir Kontak Wadah * /
. kontak-bentuk-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 * / menyerahkan
kontak-bentuk-nama, kontak-form-email,... contact-form-email-pesan {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/ * Menyerahkan gaya tombol * /
. contact-form-tombol-submit {
border-color: # C1C1C1;
background: # E3E3E3;
color: # 585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/ * Tombol Submit pada mouseover * /
kontak-form-tombol-submit:. 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 samping sebelah <b:skin> ... </ b: skin> dan paste kode tepat di atas]]> </ b: skin> (tekan CTRL + F untuk menemukannya):
Cara Tambah Formulir Kontak Dalam Halaman Statis
Langkah pertama adalah untuk menambahkan Formulir Kontak gadget (Layout) dan kedua, untuk mengedit template (Template> Edit HTML) untuk menghilangkan 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 miliki 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/>
<Masukan class = 'kontak-bentuk-name' expr: id = 'Data: widget.instanceId + "_contact-bentuk-nama"' name size = 'name' = '30 'type =' text value '='' />
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'> * </ span>
<br/>
<Masukan class = 'kontak-form-email' expr: id = 'Data: widget.instanceId + "_contact-form-email"' nama 'email' size = = '30 'type =' text value '='' />
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'> * </ span>
<br/>
<Textarea class = 'kontak-form-email-pesan' cols = '25 'expr: id =' Data: widget.instanceId + "_contact-form-email-pesan" 'name =' email-pesan 'baris =' 5 '/>
<p/>
<Masukan class = 'kontak-form-tombol kontak-form-tombol-submit' expr: id = 'Data: widget.instanceId + "_contact-form-submit"' expr: value = 'Data: contactFormSendMsg' 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'>
<p> Nama <p>
<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>
_________________________________________________________________________________
Anda Baru saja membaca artikel "Widget Baru Blogger : Formulir Kontak - Mengubah Gaya & Install di Halaman Statis " semoga artikel ini dapat memberikan informasi yang bermanfaat untuk anda semua, Jangan lupa tetap update artikel terbaru Windows Blue Free
-->
Tidak ada komentar:
Posting Komentar