Cara Membuat Contact Us di Blog – Halaman kontak biasa dikenal dengan sebutan Contact Us atau Kontak Kami merupakan halaman wajib yang harus dipasang pada blog atau website. Adanya halaman kontak bertujuan untuk lebih dekat dengan pengunjung atau visitor agar lebih mudah untuk berkomunikasi.
Halaman Contact Us biasanya dipasang pada halaman statis blog, dengan menampilkan form pesan atau hanya menampilkan info kontak saja seperti email, FB, WA, atau dengan kontak yang lainnya.
Pada tutorial kali ini saya akan berbagi cara membuat halaman contact us dengan form yang sangat keren dan membuatnya cukup mudah walaupun untuk pemula sekalipun. Selain kontak biasanya blog memuat halaman privacy policy dan halaman disclaimer yang merupakan halaman wajib untuk mendaftar adsense.
Contact Form Blogger
Cara Membuat Contact Us di Halaman Statis Blogger
- Memasang widget formulir di sidebar, caranya login akun Blogger >> pilih Tata Letak >> Tambahkan Gadget >> Gadget lainnya >> Formulir Kontak seperti gambar berikut:
- Setelah pasang wideget kontak, selanjutnya masuk menu Tema >> Edit HTML. Letakkan kode berikut tepat diatas kode </head>.
<style type='text/css'> #ContactForm1{display:none} </style> <b:if cond='data:blog.pageType == "static_page"'> <style type='text/css'> /* Contact form */ #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:50px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;} #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fff;outline:0} #ContactForm1_contact-form-email-message{width:95%;height:170px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;} #ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:10px;margin:0;cursor:pointer;background-color:#6e9ee6;border:1px solid #6e9ee6;border-radius:3px;} #ContactForm1_contact-form-submit:hover{background-color:#3c3c3c} #ContactForm1_contact-form-submit:active{position:relative;top:2px;} #ContactForm1_contact-form-submit:focus{outline:0} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left} @media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}} @media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}} </style> </b:if>
- Jika sudah memasang kode diatas, selanjutnya buka menu Halaman >> Halaman Baru >> Beri judul halaman statis dengan Contact Us, Kontak atau Kontak Kami.
- Kemudian Masukkan kode berikut pada mode HTML.
<div dir="ltr" style="text-align: justify;" > Silahkan isi pesan melalui form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. Terima kasih <br /> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br /> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /><br /> <div class="clear"> </div> <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> </div>
PERHATIAN:
Jika kontak form tidak berfungsi, maka langkah selanjutnya adalah masuk menu Tema >> Edit HTML kemudian memasang kode berikut ini tepat diatas kode </body>.
<script type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2759014865-widgets.js"></scr" + "ipt>"); //]]> </script> <script type='text/javascript'> if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "<data:blog.blogId/>";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogIDx3d<data:blog.blogId/>","<data:blog.url/>","<data:blog.blogId/>"); _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": "<data:blog.blogId/>", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull")); </script>
Demikian cara membuat halaman kontak pada statis blogger, jika masih kesulitan jangan segan untuk bertanya melalui kontak komentar yang sudah tersedia. Salam Blogger Jepara.
Sumber: Bungfangki.com
mas, cara melihat perubahan dari yang telah kita lakukan untuk adanya contact us dan disclaimer seperti bagaimana?
Silahkan pasang halaman pagenya dibagian blog misal menu navigasi, sidebar atau footer.
to : Admin Blogger Jepara
Kalo untuk membuat widget komentar otomatis setiap postingan seperti yg digunakan Blogger Jepara bagaimana scriptnya?
Mohon informasinya.
Terima kasih
Untuk blog Blogger Jepara menggunakan platform wordpress jadi tentu beda dengan tampilan di blogger.