Cara membuat widget contact form blogger

Selamat datang di halaman artikel berjudul Cara membuat widget contact form blogger dengan Label: Blogger Widgets artikel ini di rangkum dari berbagai sumber yang ada di internet , mudah-mudahan bisa menambah informasi bagi pembaca semua . Kita tidak menjamin ke akurasian isi artikel ini , jangan di jadikan satu satunya acuan untuk mempraktekanya . terimakasih dan selamat membaca .

PASANG IKLAN 1

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.
Terimakasih telah membaca artikel berjudul Cara membuat widget contact form blogger Mudah-mudahan apa yang telah di sampaikan dalam artikel ini bisa bermanfaat untuk anda , jika anda suka dengan artikel ini silahkan sampaikan pada teman . Jika kurang berkenan silahkan sampaikan pada admin dengan cara memberi komentar di kolom yang telah di sediakan .