Table of Content

Cara Membuat Halaman Contact Us di Blog Dengan Mudah

Cara Membuat Halaman Contact Us di Blog Dengan Mudah

Cara Membuat Halaman Contact Us di Blog Dengan Mudah - Pada postingan kali ini, saya akan membahas artikel tentang Blogger lagi, yaitu Cara Membuat Halaman Contact Us di Blog Dengan Mudah.

Sebelum ke pembahasan inti artikel, mungkin artikel " Cara Membuat Privacy Policy Untuk Blog " Bisa bermanfaat buat kalian yang belum membuat halaman tersebut.

Seperti yang sudah kita semua ketahui, halaman Contact Us/Kontak saya berperan sangat penting untuk sebuah blog/website yang kita miliki.

Banyak sekali manfaat dari halaman Kontak ini, misalnya untuk menjalin silaturahmi sama pemilik blog, memberi kritik atau saran untuk blog kedepannya, atau mungkin juga sebagai alat untuk menghubungi pemilik blog untuk bekerja sama.

Untuk membuatnya menurut saya sangat mudah sekali, bisa aja hanya dengan memberikan alamat sosial media kalian yang bisa dihubungi, Tapi pada artikel kali ini saya akan membuat halaman kontak menggunakan Formulir.

Kenapa lebih memilih menggunakan Formulir dibandingkan dengan yang lain? Agar terlihat simpel aja, dan mudah untuk dipakai oleh pengunjung blog kita, Oke langsung saja ke pembahasan tutorialnya.

Cara Membuat Halaman Contact Us di Blog

1. Pertama, login ke akun Blogger kalian.

2. Masuk ke tab Halaman/Page.

3. Buat Halaman/Page baru.

4. Beri Judul halaman sesuai selera kalian, misalkan " Contact Us " atau juga bisa " Kontak Saya "

5. Lalu pindah ke mode HTML, dan masukan script dibawah ini.

<style type="text/css">
.contact-form{width:600px;max-width:100%;margin-left:auto;margin-right:auto;padding:0;color:#000}.contactf-name{float:left;width:45%}.contactf-email{float:right;width:45%}.contact-form-email,.contact-form-email-message,.contact-form-name{width:100%;max-width:100%;padding:20px 15px;margin:20px 0 30px 0}.contact-form-button,.contact-form-button-submit{width:20%;max-width:20%;height:40px;color:#fff;background:#097b84;font-size:.875em;border-radius:5px}.contact-form-button-submit{-webkit-transition:background-color .1s ease-out .1s;-moz-transition:background-color .1s ease-out .1s;-o-transition:background-color .1s ease-out .1s;transition:background-color .1s ease-out .1s}.contact-form-button-submit:hover{background:#076269}
<script>
var blogId = 'nomor-ID-blog';//nomor ID blog kamu
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah terkirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat terkirim, coba beberapa saat lagi.';
var contactFormEmptyMessageMsg ='Harap isi kotak pesan.';
var contactFormInvalidEmailMsg = 'Harap isi alamat email yang valid.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="contact-form">
<form name="contact-form">
<div class="contactf-name">
Nama : <br/>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Nama..."/></div>
<div class="contactf-email">
Email: <em>(harap diisi)</em><br/>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Email..."/></div>
<div style="clear:both"></div>
<div class="contactf-message">
Pesan: <em>(harap diisi)</em><br/>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" style="height: 149px; margin: 0px;" placeholder="Pesan..."></textarea></div>
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Jangan lupa untuk mengganti tulisan " nomor ID Blog Kamu " dengan nomor ID blogger kalian.

Jika sudah, kalian tinggal masukan aja ke tata letak Template blog kalian.

Untuk contoh halaman kontaknya, kalian bisa lihat gambar dibawah ini.

Cara Membuat Halaman Contact Us di Blog Dengan Mudah

Sekian dari artikel tentang Cara Membuat Halaman Contact Us di Blog Dengan Mudah, semoga bermanfaat, terimakasih.

Posting Komentar