Cara Membuat Halaman Contact Us di Blog

Dalam mengelola blog, kita membutuhkan yang namanya halaman Contact Us (halaman kontak). Dengan adanya halaman kontak tersebut, pengunjung bisa lebih mudah untuk menghubungi penulis blog. Adanya halaman kontak juga mempermudah orang yang berniat memasang iklan di blog kita.

Ada banyak istilah untuk penyebutan halaman kontak pada dunia blogging, contohnya Contact Us, Contact Form, Formulir Kontak, Halaman Kontak, Contact Me, Kotak Saran, Hubungi Kami dan masih banyak lagi.

Cara Membuat Halaman Contact Us di Blog

1. Salin script di bawah. Ganti tulisan berwarna merah dengan ID blog kalian dan tulisan yang berwarna biru diganti dengan URL blog kalian. Untuk yang belum mengetahui bagaimana cara melihat ID Blog, kalian bisa membaca artikel Cara Mengetahui ID Blog Kita.

<form id=”kontak-arlina” name=”contact-form”> <input id=”ContactForm1_contact-form-name” name=”name” placeholder=”Name *” size=”30″ type=”text” value=”” /> <input id=”ContactForm1_contact-form-email” name=”email” placeholder=”Email *” size=”30″ type=”text” value=”” /> <textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”Message *” rows=”5″></textarea> <input id=”ContactForm1_contact-form-submit” type=”button” value=”Send Message”/> <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”> #comments,.post_meta,#blog-pager{display:none} form{color:#666} form.payforpal{margin:auto;text-align:center} #kontak-arlina{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 rgba(0,0,0,.14);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 rgba(0,0,0,.14);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:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease} #ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} .contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px} .contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px} img.contact-form-cross{line-height:40px;margin-left:5px} .post-body input{width:initial} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style> <script type=”text/javascript”> //<![CDATA[ if (window.jstiming) window.jstiming.load.tick(‘widgetJsBefore’); //]]> </script> <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’] = ‘IDBLOGSOBAT‘;BLOG_attachCsiOnload(”); }_WidgetManager._Init(‘//www.blogger.com/rearrange?blogIDx3dIDBLOGSOBAT‘,’//www.wikuta.com/’,’IDBLOGSOBAT‘); _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’: ‘IDBLOGSOBAT‘, ‘contactFormNameMsg’: ‘Name’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Message’, ‘contactFormSendMsg’: ‘Send’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’)); //]]> </script>

2. Setelah itu kita pergi ke dasbor blog kita, kemudian ke menu Halaman dan klik HALAMAN BARU.

Cara Membuat Halaman Contact Us di Blog

3. Beri judul halamannya dengan Contact Us, kemudian ubah dari Tampilan menulis ke Tampilan HTML. Pastekan script tersebut dan terakhir tinggal kita klik Publikasikan.

Cara Membuat Halaman Contact Us di Blog

4. Selesai! Halaman Contact Us berhasil dibuat. Hasilnya akan seperti gambar di bawah.

Cara Membuat Halaman Contact Us di Blog

Itulah cara membuat halaman Contact Us di blog.

Leave a Comment