Cara Membuat Kontak Form/Contact Form Di Blogger Dengan Mudah dan Praktis - Hi Sobat Nafisah14 kali ini saya bagikan bagaimana cara Membuat Kontak Form yang ada di blogger. Dengan
pengalaman yang saya lakukan pada
blog saya sendiri dan dengan banyak percobaan yang selalu gagal dan akhirnya saya berhasil juga karena dengan kerja keras dan pantang menyerah tentunya. hehe... intinya kira harus selalu bersemangat melakukan sesuatu yang belum terpecahkan dan tidak mudah menyerah.
|
Gambar Kontak Form/Contact Form Di Blogger |
Kita lanjut dari permasalahan pertama yaitu Cara Membuat Kontak Form/Contact Form Di Blogger Dengan Mudah dan Praktis. Sebelum kita ke pokok inti yang harus dilakukan adalah memasang atau menambahkan widget Formulir Kontak di sidebar blog kamu.
Lihat Gambar di bawah
|
Menambahkan Widget Formulir Kontak di Blogger |
Setelah anda berhasil mendambahkan widget Formulir kontak pada sidebar, langkah selanjutnya adalah menyembunyikan widget formulir kontak tersebut.
bagaimana cara menyembunyikan Widget Formulir Kontak tadi? caranya
Login ke Blogger Anda
, Masuk ke menu
TEMPLATE + EDIT HTML Selanjutnya klik pada kode template, tekan tombol Ctrl+F pada keyboard dan temukan kode berikut
]]></b:skin>
Letakkan Kode CSS di bawah ini
di atas kode ]]></b:skin>
KODE CSS :
#ContactForm1,#ContactForm1 br{display:none;visibility:hidden}
Haloo.... Setelah ditambahkan Widget Kenapa disembunyikan?
Karna kita hanya ingin menampilkan formulir kontak pada halaman statis dan postingan, kalau kita biarkan terlihat di bar sisi blog, maka akan terdapat double formulir kontak dalam satu halaman.
Langkah Selanjutnya, pasang kode formulir kontak dibawah ini pada halaman statis atau postingan. Misalkan anda ingin memasang formulir kontak pada halaman "kontak" blog anda.
Silahkan buat halaman baru, beri nama halaman "hubungi kami" atau "contact", aktifkan mode pengeditan HTML, kemudian Pastekan Kode HTML di bawah ini :
<form name="contact-form">
<h2 style="text-align: center;">
<span style="font-size: x-large;">Hubungi Kami</span></h2>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Kami ucapkan banyak terima kasih atas kunjungan anda di blog Nafisah14. Jika ada pertanyaan atau kerjasama, silahkan untuk menghubungi kami langsung melalui kontak berikut:</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b>WA : 0853 xxx xxxx</b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Jika ingin kirim pesan melalui email, silahkan isi pesan pada kolom dibawah ini:</div>
Nama <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
Email <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
Pesan <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="height: 142px; margin: 0px; width: 547px;"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
Selanjutnya Klik Tombol
Publikasikan
Selesai...
Untuk melihan Previewnya silahkan
Lihat Contact Us Nafisah14.
Note : Semua Tulisan Merah Bisa dirubah sesuai dengan keinginan kita masing-masing tinggal disesuaikan..
Mudah bukan Selamat Mencoba... Bila ada yang kurang jelas silahkan bertanya di kolong komentar...
Semoga Bermanfaat...