Cara mudah membuat menu Layanan Contact Us simple dan keren di Blogger

Membuat contact us form untuk sebuah blog memang tidak di wajibkan akan tetapi bisa dibilang juga menu optional, sebab blogger sendiri telah menyediakan kolom komentar untuk kamu yang pengen bertanya-tanya atau ingin request postingan dari sang penulis. Akan tetapi dengan membuat atau menambahkan menu contact form ini tentu akan lebih mempermudahkan untuk sang penulis dan juga para pengunjung, karena tidak perlu scroll panjang kebawah hanya untuk melihat komentar terbaru.

membuat contact us
Selain juga mempermudah bagi penulis dan pengunjung, tentu memiliki nilai baik juga di mata Google. Tak hanya membantu tapi juga menu ini bisa menjadi masalah apabila letaknya tidak sesuai, semisal kamu menaruh link ditengah-tengah postingan tentu itu akan bisa mengganggu pegunjung untuk membaca atau untuk menanggapi tulisan kamu.

Jadi taruhlah contact us form ini berada didepan atau berada diberanda yang mana mudah dibaca dan mudah ditemukan oleh pengunjung, jadi bisa sangat membantu atau bisa juga ditaruh di bawah blog kamu, tapi alangkah sangat baik kalau dibuat menu melayang dan pasti itu akan sangat mudah dilihat oleh pengunjung.

Baca juga : Cara Mempercepat Loading Website (Optimasi Website)

Tapi kamu bingung cara membuat menu Contact us form ini? Tenang saja karena kami akan membantu kamu untuk membuat layanan form contact us yang simple dan keren, pokoknya cantik dan ringan banget dah. Kamu cukup ikuti saja yang telah saya buat karena sudah saya uji dan saya praktekan dan hasilnya sangat baik dan pasti fungsinya juga berjalan dengan dengan semestinya. Beginilah caranya:

Membuat Contact us untuk Blogger
caranya cukup simple dan gampang kok, kamu hanya perlu tahu ID-Blogger kamu dan url blog kamu.
  • Tambahkan CSS berikut ke pengaturan HTML.
/* 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 #2f303f;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 #2f303f;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:#2f303f;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#2f303f;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} @media only screen and (max-width:640px){#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%}}
  • Buat halaman baru pada blogger, kalau udah ada tinggal tambah kode beriku ini dengan mode HTML bukan compose
<form id="kontak" 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" size="30" placeholder="Email *" 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: 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" 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'] = 'ID_BLOG_DISINI';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dID_BLOG_DISINI','SIDIKUL.COM/','ID_BLOG_DISINI');
_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': 'ID_BLOG_DISINI', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]> </script>
*Note : ganti ID_BLOG_DISINI dengan kode blogger ID kamu. Dan ganti juga SIDIKUL.COM dengan url blog kamu.
  • Sekarang tinggal kamu simpan.
Baca juga : Tips Sederhana Agar Mudah Diterima Adsense Indonesia

Ingat juga kamu copy link halaman tersebut dan tempelkan pada beranda kamu, pokoknya taruh pada halaman yang mudah untuk di lihat oleh pengunjung. Contact us form ini apabila diisi makan isi dari pesa yang di tulis tersebut akan langsung masuk ke email blogger kamu. Jadi kamu cukup cek email blogger kamu.

Bagaimana cukup gampang dan mudah bangetkan kalau hanya untuk membuat form Contact us untuk blogger. sekian semoga membantu :D
Blogger
Disqus