Cara Membuat Halaman Contact Us di Blogger – Halaman Contact Us merupakan halaman yang digunakan untuk menghubungi admin dari pemilik website tersebut.
Meskipun banyak metode yang dapat digunakan untuk menghubungi pemilik website, namun jika harus menggunakan nomor telepon pribadi pasti rasanya kurang nyaman.
Maka dari itu, dengan membuat halaman Contact Us yang berisikan formulir kontak maka pengunjung dapat menghubungi pemilik website dengan menggunakan email.
Seperti biasa, disini KumpulTech akan menjelaskan bagaimana cara membuat halaman Contact Us di Blogger. Tanpa lama-lama lagi, langsung saja simak selengkapnya di bawah ini.
Cara Membuat Halaman Contact Us di Blogger
Membuat halaman contact us di Blogger dengan menggunakan formulir caranya cukup mudah. Disini saya menggunakan script formulir kontak yang dibuat oleh Igniel.
- Yang pertama silahkan buka dashboard Blogger > pilih menu Tema > Edit HTML. Lalu tambahkan CSS ini di atas kode </head>
<b:if cond='data:view.isPage'>
<style>
/* Contact Form */
#comments,.post_meta,#blog-pager{display:none}form{color:#666} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #1d2129;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#1d2129;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#1d2129;border:none;box-shadow:none;color:#fff;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}
</style>
</b:if>
- Buat halaman baru dengan judul Contact Us atau nama lainnya sesuai keinginanmu. Ubah tampilannya ke mode HTML lalu copy semua script dibawah ini.
<form id="kontak" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan"/>
<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>
<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'] = '6600000000000000066';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6600000000000000066','//www.igniel.com/','6600000000000000066');
_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': '6600000000000000066', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
Pada kode tersebut silahkan ganti 6600000000000000066 dengan ID blog kamu. Untuk mengetahui ID blog dapat kamu cek pada url dashboard Blogger atau pada saat kamu membuat halaman tersebut seperti gambar di bawah ini.
- Setelah semuanya diubah, tinggal kamu Publish dan cek sendiri hasilnya.
Akhir Kata
Itulah cara membuat halaman contact us di blogger. Dengan adanya halaman tersebut maka pengunjung dapat lebih mudah untuk menghubungi pemilik website dengan cara mengisi formulir. Semoga cara diatas bermanfaat untuk kamu.
