Cara Custom Contact Form Dari Widget Di Blogger Part-2

Sebelumnya kami telah berbagi tutorial tentang Cara Menambahkan Widget Contact Form di Blogspot (Part-1).  Sekarang di artikel ini kita akan memahami Cara Custom contact Form Dari Widget Di Blogger. Pada dasarnya ini adalah bagian kedua dari artikel itu. Sebagian besar blogger yang menggunakan platform blogspot tidak menggunakan widget formulir kontak resmi karena tampilannya, tidak terlihat profesional dan menarik, juga tidak cocok dengan desain template blogger khusus. Jadi, Mari kita lihat Cara Custom Contact Form Dari Widget Di Blogger.

Langkah Pertama
Sebelum mengikuti tutorial di bawah ini kami sarankan Anda untuk menginstal widget formulir kontak di blog Anda, prosesnya sangat mudah dan dapat dilakukan dalam hitungan menit, dengan klik sederhana. Kami telah menerbitkan tutorial sebelumnya, jadi Anda tidak akan menghadapi kesulitan. Mohon mengikuti  Cara Menambahkan Widget Contact Form di Blogspot (Part-1).

Proses Kustomisasi (Menambahkan CSS)
Sebelum Mengedit kami menyarankan Anda untuk membuat cadangan dari template Anda, sehingga apapun yang salah Anda masih memiliki desain blog.

Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Templates >> Edit HTML dan cari ending ]]> </ b: skin> tepat di atasnya paste kode berikut.

CSS
/* ######## Contact Form Widget By Sorabloggingtips.com ######################### */
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {
max-width: none;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
background-color: #EBEBEB;
border: 1px solid #ccc;
}
.contact-form-widget .form {
}
.contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border:0;
background-image: none;
background-color: #00c8d7 !important;
cursor: pointer;
font-style: normal;
font-weight: 400;
}
.contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus {
border: 0;
box-shadow: none;
}
.contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {
border: 0;
}
.contact-form-button-submit:hover {
background-color: #303030;
background-image: none;
border: 0;
}

,