Halaman Kontak menjadi salah satu bagian yang sangat penting untuk dibuat agar pengunjung dapat selalu terhubung dengan kita secara pribadi.
Fungsi Halaman Kontak
Selain itu membuat halaman kontak juga mempunyai beberapa fungsi penting diantaranya :
- Sebagai syarat diterima sebagai publisher oleh Google Adsense.
- Sebagai wadah menerima masukan, laporan, dan kritikan.
- Sebagai tempat menjalin hubungan kerja sama bisnis atau sponsorship.
- Sebagai cara berkomunikasi secara personal, rahasia, dan aman.
Cara Membuat Halaman Kontak
Buat kalian yang mungkin sedang memakai template median ui yang tidak resmi .Mungkin akan sedikit kesulitan dalam membuat halaman kontak pada template median ui.
Dikarenakan untuk penerapan halaman ini menggunakan script khusus yang dibuat oleh sang kreator Muhammad Maki dengan menyesuaikan css yang ada dalam template median ui.
Untuk demo versi 1.6 kalian bisa cek halaman kontak di blog ini
Bagi kalian yang ingin memasang halaman kontak ini pada template kalian silahkan ikuti langkah dibawah ini.
Khusus pengguna template median ui 1.5
Silahkan buat halaman baru dengan judul terserah kalian biasanya Kontak Kami / Contact Us atau lainya.
Ganti format penulsan dengan mode HTML dan pastekan semua kode dibawah ini :
<div class='ContactForm' id='ContactForm1'>
<form name='contact-form'>
<div class='input-area'>
<label for='ContactForm1_contact-form-name'>Name</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' />
</div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email'>Email <i>*</i></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' />
</div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email-message'>Message <i>*</i></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea>
</div>
<div class='input-area'>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim' />
</div>
<div class='notif-area'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d000000000000000000','//www.your_domain.com/','000000000000000000');
_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': '000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
Jangan lupa pada kode yang saya tandai ganti dengan url blog dan juga id blog kalian
Jika sudah silahkan klik Publikasikan dan lihat hasilnya.
untuk pengetesan silahkan coba kirim pesan, jika berhasil akan ada email masuk ke akun kalian.
Khusus pengguna median ui 1.6
Langkahnya sama saja silahkan buat halaman/page baru dengan judul Kontak atau terserah kalian.
Ubah format penulisan menjadi mode HTML dan silahkan copy dan paste kode dibawah ini:
<div class='ContactForm s-2' id='ContactForm1'>
<form gray='cForm'>
<div class='cArea'>
<label>
<input class='cInpt cgray' id='ContactForm1_contact-form-gray' gray='gray' type='text'/>
<i class='n'>Name</i>
</label>
</div>
<div class='cArea'>
<label>
<input class='cInpt cMail' id='ContactForm1_contact-form-email' Name='email' type='email'/>
<i class='n req'>Email</i>
</label>
<i class='h'>Valid email required</i>
</div>
<div class='cArea'>
<label>
<textarea class='cInpt cMsg' id='ContactForm1_contact-form-email-message' gray='message' rows='3'></textarea>
<i class='n req'>Message</i>
</label>
<i class='h'>Empty messages not accepted</i>
</div>
<div class='cArea'>
<input class='cBtn' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
</div>
<div class='cArea nArea'>
<p class='cNtf' id='ContactForm1_contact-form-error-message'></p>
<p class='cNtf' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>/*<![CDATA[*/ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '0000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\0000000000000000000','//www.your_blog.com/','0000000000000000000');
_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': '0000000000000000000', 'contactFormgrayMsg': 'gray', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); var inputs = document.querySelectorAll('.widget input[type=text], .widget input[type=email], .widget textarea'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() {var bg = this.value ? 'fl' : 'nfl'; this.setAttribute('data-text',bg);}); } /*]]>*/</script>
Pada bagian yang saya block biru jangan lupa kalian ganti dengan url dan id blog kalian.
Jika sudah klik Publikasikan kemudian coba lihat hasilnya.
lakukan pengetesan dengan mengirimkan pesan, jika berhasil akan ada notifikasi email masuk ke akun kalian.
Jadi begitu saja caranya, sangat mudah diterapkan. Jika ada kesulitan silahkan tinggalkan komentar.