Memasang Widget Formulir Kontak Di Halaman Statis - Deny Listianto

24 Juni 2018

Memasang Widget Formulir Kontak Di Halaman Statis

Memasang Widget Formulir Kontak Di Halaman Statis

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.

Memasang Widget Formulir Kontak Di Halaman Statis

Tambahkan widget Formulir kontak dengan cara klik tanda plus di widget Formulir kontak kemudian klik Simpan.

Memasang Widget Formulir Kontak Di Halaman Statis

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.

Memasang Widget Formulir Kontak Di Halaman Statis

Pindah ke tab HTML, lalu tambahkan kode HTML di bawah ini pada tab HTML.

Memasang Widget Formulir Kontak Di Halaman Statis

<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.

Memasang Widget Formulir Kontak Di Halaman Statis

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.

Memasang Widget Formulir Kontak Di Halaman Statis

Jika sudah ditambahkan klik tombol Publikasikan dan selesai.


Sekian Tutorial Cara Memasang Widget Formulir Kontak Di Halaman Statis, Selamat Mencoba dan Semoga Bermanfaat....
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo