Sekarang saya
akan membahas bagaimana cara membuat kontak form untuk blogspot dengan tampilan
yang seper keren
Jika Sobat
tertarik untuk memasangnya di Blog Sobat silahkan ikuti langkah-langkah dibawah ini :
KUSTOMISASI
DI BLOGSPOT
Saya
menggunakan CSS untuk memperkeren Kontak Form ini, caranya :
1. Login ke Blogger Sobat
2. Jika sudah
di Dashboard
Pergi Ke Rancangan » Edit HTML
3. Masukkan
kode css berikut di atas kode ]]></b:skin> :
/*BloggingPasuruan Kontak Form*/
.kontak form { padding:0;}
.kontak input{width: 290px;padding:5px; margin:0 5px 10px 0;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLmmE_-cjhgjqywNlTcF8pAPsuM7syn4jr_b_YQuVFUmhP0lse87xWWaWV_t7gsvq3nbAX5dtBMeRpoyj07Cc92am87O3SWwAnJT3a9Ey01msTdbex4lrgUmbJxtve2KrKY6vbw-UcxY9/s0/random.png) top left repeat-y;border-left:1px solid #dddbd4;border-top:1px solid #dddbd4;border-right:1px solid #f5f5f1;border-bottom:1px solid #f5f5f1;}
.kontak input:hover { background: #fff; }
.kontak textarea{width: 600px;padding:5px; margin:0 5px 10px 0;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLmmE_-cjhgjqywNlTcF8pAPsuM7syn4jr_b_YQuVFUmhP0lse87xWWaWV_t7gsvq3nbAX5dtBMeRpoyj07Cc92am87O3SWwAnJT3a9Ey01msTdbex4lrgUmbJxtve2KrKY6vbw-UcxY9/s0/random.png) top left repeat-y;border-left:1px solid #dddbd4;border-top:1px solid #dddbd4;border-right:1px solid #f5f5f1;border-bottom:1px solid #f5f5f1;}
.kontak textarea:hover { background: #fff; }
.kontak input#cancel { width:70px;margin-top:10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfSTThAnrHwl7s1znhrmSip7sEvlVN29sx2h45fPfECihRZkcuFOjDyHyXZsZfd30FdHfiD0CJaVVeNJV8Gq1arPsPQfptHNpZcGK9oVj9VwAcGFtHRcB-ZponKsx-7XDsnHjavWe7vsvl/s1600/background.png) top left repeat-x;color:#ffffff;padding-bottom: 3px;border:1px solid #94c1cd;}
.kontak input#submit { width:100px;margin-top:10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfSTThAnrHwl7s1znhrmSip7sEvlVN29sx2h45fPfECihRZkcuFOjDyHyXZsZfd30FdHfiD0CJaVVeNJV8Gq1arPsPQfptHNpZcGK9oVj9VwAcGFtHRcB-ZponKsx-7XDsnHjavWe7vsvl/s1600/background.png) top left repeat-x;color:#ffffff;padding-bottom: 3px;border:1px solid #94c1cd;}
.kontak form { padding:0;}
.kontak input{width: 290px;padding:5px; margin:0 5px 10px 0;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLmmE_-cjhgjqywNlTcF8pAPsuM7syn4jr_b_YQuVFUmhP0lse87xWWaWV_t7gsvq3nbAX5dtBMeRpoyj07Cc92am87O3SWwAnJT3a9Ey01msTdbex4lrgUmbJxtve2KrKY6vbw-UcxY9/s0/random.png) top left repeat-y;border-left:1px solid #dddbd4;border-top:1px solid #dddbd4;border-right:1px solid #f5f5f1;border-bottom:1px solid #f5f5f1;}
.kontak input:hover { background: #fff; }
.kontak textarea{width: 600px;padding:5px; margin:0 5px 10px 0;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLmmE_-cjhgjqywNlTcF8pAPsuM7syn4jr_b_YQuVFUmhP0lse87xWWaWV_t7gsvq3nbAX5dtBMeRpoyj07Cc92am87O3SWwAnJT3a9Ey01msTdbex4lrgUmbJxtve2KrKY6vbw-UcxY9/s0/random.png) top left repeat-y;border-left:1px solid #dddbd4;border-top:1px solid #dddbd4;border-right:1px solid #f5f5f1;border-bottom:1px solid #f5f5f1;}
.kontak textarea:hover { background: #fff; }
.kontak input#cancel { width:70px;margin-top:10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfSTThAnrHwl7s1znhrmSip7sEvlVN29sx2h45fPfECihRZkcuFOjDyHyXZsZfd30FdHfiD0CJaVVeNJV8Gq1arPsPQfptHNpZcGK9oVj9VwAcGFtHRcB-ZponKsx-7XDsnHjavWe7vsvl/s1600/background.png) top left repeat-x;color:#ffffff;padding-bottom: 3px;border:1px solid #94c1cd;}
.kontak input#submit { width:100px;margin-top:10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfSTThAnrHwl7s1znhrmSip7sEvlVN29sx2h45fPfECihRZkcuFOjDyHyXZsZfd30FdHfiD0CJaVVeNJV8Gq1arPsPQfptHNpZcGK9oVj9VwAcGFtHRcB-ZponKsx-7XDsnHjavWe7vsvl/s1600/background.png) top left repeat-x;color:#ffffff;padding-bottom: 3px;border:1px solid #94c1cd;}
4. Selesai
dan simpan template anda.
PEMBUATAN
KONTAK FORM EMAIL
Untuk membuat
kontak form disini, saya menggunakan fasilitas gratis dari emailmeform.com,
jika anda belum terdaftar disana, silahkan daftar terlebih dahulu, jika sudah,
silahkan ikuti langkah-langkah berikut ini :
2.Lalu login
ke akun EmailMeForm
yang sudah Sobat buat .
3. Klik tombol "Add Form" pada pojok kanan atas, setelah tombol Pop Up muncul klik pada opsi pertama.
4. Pilih Form » Contact Form, lalu klik tombol
"Customize"
5. Edit
Kontak Form sesuai dengan selera anda. lalu tekan tombol "Save Form"
sehingga muncul Pop Up lalu pilih opsi kedua untuk mengedit email penerima dari
kontak form anda ini.
5. Klik
"Save", lalu pilih opsi
ketiga
6. Klik pada
pilihan "code"
untuk mendapatkan kode html kontak form anda.
7. Ambil kode
paling bawah "HTML ONLY", copy lalu paste di notepad.
8. Buka
notepad tempat kode diatas anda letakkan, lalu cari kode [Gunakan Ctrl + F]
<input
value="Send email" type="submit" /><input
value="Clear" type="reset" />
Ganti dengan
<input
id=”submit” type="submit" value="Send email" /><input
id=”cancel” type="reset" value="Clear" />
9. kembali ke
halaman blogspot anda, klik menu Posting » Edit Laman » Laman baru kemudian
masukkan seluruh kode HTML Kontak Form milik anda yang berada dalam notepad
kehalaman baru ini [ jangan paste code menggunakan compose tapi HTML ].
10. Jangan
lupa membuat judul Laman/Page baru anda tersebut, misal dengan Contact Me,
Hubungi Kami.
Baiklah sobat
blogger, cukup sekian dulu tutorial tentang cara membuat Form Kontak Keren ini.
Semoga bermanfaat.....