Add Style Sheets for Contact Form Widget Blogger

Meneruskan artikel blogger contact form gadget, bagaimana cara meng-snippet tampilan kontak blogger dengan menanamkan CSS secara sederhana namun tetap gaya. Ada beberapa teknik yang dapat dilakukan dalam hal ini. Pertama dengan merombak syntax dalam ContactForm1 bawaan blogger. Kedua dgn cara langsung menambahkan kode CSS dengan class & ID yg sudah ada! Bila sobat tertarik dengan cara ke satu maka bacalah di
www.oloblogger.com/2013/05/contacto-blogger-pagina-estatica.html
Di sana sudah dijelaskan syntax apa saja yg mesti digantikan agar selaras dengan style sheet yg sudah di buat. Versi Koben sekarang, tanpa mesti ganti syntax bawaan dari blogger, cukup tanamkan ramuan CSS, jebret jadi. Nggak ribet, tinggal urusan skill CSS kalian saja jika memang mau lebih keren. Gue buat standaran saja ;) Hias-menghiasi terserah anda.

Cari kode </b:skin> letakkan tepat diatas/sebelum.

#ContactForm1 {
width: 260px; 
height: 450px; 
margin: 10px auto; 
padding: 10px 20px;
background: #c9d0de; 
border: 1px solid #e1e1e1;
}
#ContactForm1 h2 {
margin: 0; 
color: #445668; 
font-size: 25px; 
text-shadow: 0px 1px 0px #f2f2f2;
}
.contact-form-name,.contact-form-email {
width: 260px; 
height: 35px; 
color: #FFF;
padding: 0 5px; 
background: #5E768D;
}
.contact-form-email-message {
width: 260px; 
height: 170px; 
padding: 0 5px; 
color: #FFF;
background: #5E768D;
}
.contact-form-button,.contact-form-button-submit {
width: 101px; 
height: 35px; 
float: right; 
color: #FFF;
font-weight: bold;
padding: 0; 
margin: 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
}

SAVE.
Itulah unik ID CSS secara global yg bisa kalian pakai untuk memberikan sentuhan berbeda pada "Contact Form" widget blogger. Bila mau melihat unik-ID lainnya, maka sobat harus bisa membaca kode dalam mode Ctrl + U alias source web :d Aturlah height, width, padding, margin and color sesuai kebutuhan. Bila sukses maka hasil jadi akan terlihat seperti berikut...

Berikut links resource untuk membuat form contact full stylish

www.doublemesh.com/coding/free-premium-css3-forms/
www.djdesignerlab.com/2011/08/08/10-useful-html5-and-css3-forms-tutorial-with-source-file/
www.pehaa.com/2011/07/create-a-unique-contact-form-with-css3-transitions/
www.cssglobe.com/collections/forms/
www.webexpedition18.com/articles/top-15-html5-and-css3-forms-tutorials/
www.acrisdesign.com/2011/07/16-best-css3-forms-tutorials/
www.splashnology.com/article/creating-html5css3-forms-30-helpful-tutorials/1275/

Happy coding \m/