Cara membuat widget contact form blogger

Widget contact form blogger - Contact Form digunakan untuk membuat interaksi antara pengunjung blog dengan pemiliknya. Kali ini blogger telah menambahkan widget tersebut dalam daftar widget bawaan blogger. akan tetapi tampilan dari Contact form bawaan blogger masih sederhana. berikut screenshotnya :

Nah widget contact form diatas masih tampilan bawaan blogger. jika sobat blogger ingin lebih bagus berikut cara pasangnya :

• Silahkan login ke dasbor blog terlebih dahulu.
• Klik panah kebawah seperti pada gambar yang diberi kotak merah :

• Pilih >> Layout
• Kemudian akan muncul halaman seperti gambar berikut ini :

• Pilih Add Gadget

• Kemudian klik "More Gadget" dan pilih 

• Kemudian simpan.

Selanjutnya langkah untuk mengubah tampilan Contact Form agar lebih elegan.

• Silahkan masuk ke dasbor blog anda.
• Klik panah kebawah seperti pada gambar yang diberi kotak merah :

• Kemudian Pilih >> Template

• Dilanjutkan dengan klik >> Edit HTML >> Proceed / lanjutkan
• Setelah masuk ke jendela Edit Html kemudian silahkan cari kode ]]></b:skin> dengan cara klik  Ctrl + F pada keyboard Komputer anda kemudian masukkan kode tersebut.
• Setelah ketemu silahkan pasang kode berikut ini tepat diatas kode ]]></b:skin>

 /* Contact Form Container */
.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;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

• Kemudian Simpan pengaturan anda.
• Maka hasilnya akan seperti pada screnshot berikut ini :

Sekarang Artikel Cara membuat widget contact form blogger sudah selesai. tinggal praktek saja. jika ada pertanyaan silahkan kirimkan komentar sobat dibawah ini. semoga bermanfaat.