Hai semua... Setelah lama tidak update karena kesibukan di hari lebaran dan koneksi internet yang down kali ini saya akan berbagi tutorial cara memasang widget formulir kontak di halaman statis.
Tutorial kali ini kita akan belajar membuat halaman yang menyediakan formulir yang dapat di gunakan untuk menghubungi kita para pemilik atau admin blog. Widget ini sebenarnya sudah disediakan di blogger namun masih terletak pada Sidebar blog untuk itu kita akan mencoba memasangnya di halaman statis blog.
Cukup penting untuk membuat halaman Contact karena jika kita akan daftar AdSense blog kita harus memiliki halaman contact. Nah, bagi yang ingin mencobanya silahkan ikuti tutorial berikut ini.
Tutorial Mudah Cara Memasang Widget Contact Form Di Halaman Statis
Langkah Pertama, buka Blogger lalu pindah ke menu Tata Letak setelah itu Tambahkan Gadget.
Tambahkan widget Formulir kontak dengan cara klik tanda plus di widget Formulir kontak kemudian klik Simpan.
Silakan lewati dua langkah diatas jika di blog sobat sudah menambahkan Widget Formulir kontak.
Selanjutnya, Buka menu Tema lalu Klik tombol Edit HTML kemudian Tambahkan kode CSS di bawah ini sebelum </head>.
<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>Setelah itu klik Simpan tema.
Selanjutnya klik menu Halaman kemudian Klik tombol Halaman baru.
Pindah ke tab HTML, lalu tambahkan kode HTML di bawah ini pada tab HTML.
<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; 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">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>Edit juga Setelan entri pada menu Pilihan lalu Checklist pada opsi Tekan "Enter" untuk baris baru dan Klik selesai.
Bagi yang mengoptimasi blognya dengan menyembunyikan CSS dan JS Blogger tambahkan kode di bawah ini tepat di bawah kode pada langkah sebelumnya.
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'XXXXXXXXXXXXXXXXXXX';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dXXXXXXXXXXXXXXXXXXX','//www.denylistianto.com/','XXXXXXXXXXXXXXXXXXX');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'XXXXXXXXXXXXXXXXXXX', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>Ganti ID Blog yang saya beri tanda XXXXXXXXXXXXXXXXXXX dengan ID Blog dan ganti URL dengan URL Blog Sobat.
ID blog bisa didapatkan saat kita membuka salah satu blog di Blogger dan akan tampil pada tab browser.
Jika sudah ditambahkan klik tombol Publikasikan dan selesai.
Sekian Tutorial Cara Memasang Widget Formulir Kontak Di Halaman Statis, Selamat Mencoba dan Semoga Bermanfaat....
