Cara Menciptakan Layanan Contact Us Di Blogger

Baca Juga

Halaman contact us ialah layanan yang diberikan kepada pengunjung untuk memperlihatkan pesan kepada admin. Halaman ini sangat perlu diterapkan, alasannya ialah memudahkan pengunjung dalam memperlihatkan pesan kepada admin. Terkadang menambahkan form contact us ini sering kali di salah gunakan oleh orang, ibarat sengaja memberi pesan yang ga bermutu, mengkritik hal yang gajelas dan lain-lain. Tapi dibalik itu, banyak keuntungannya jikalau anda memasang form contact us ini, biasanya blog dengan tema download, anda sanggup memanfaatkan form contact us ini untuk pengunjung dalam me-request software. Dengan mengisi nama, email dan pesan yang akan disampaikan, kemudian anda menekan tombol "send" maka pesan anda akan pribadi terkirim ke email admin. Kemungkinan akan dibales oleh admin jikalau beliau sedang aktif.

Biasanya form contact us ini diguanakan oleh pengunjung jikalau komentar pengunjung tidak mendapat tanggapan dari sang admin, biasanya pengunjung memakai layanan contact us ini.

Berikut ini laba menciptakan layanan contact us :

1. Pengunjung anda sanggup memberikan pertanyaan dengan topik dari salah satu artikel anda.
2. Pengunjung anda sanggup memberi kritikan atau saran yang mungkin secara tidak langsung.
3. Layanan Contact us ini ialah hidangan yang harus ada jikalau anda ingin mengajukan "Google Adsense" 

Berikut ini kekurangan jikalau anda menciptakan layanan contact us :

1. Pengunjung yang kadang kala suka jail mengirim pesan tidak terperinci atau semacamnya yang sudah niscaya tidak penting ataupun pesan yang menciptakan kita marah.
2. Terkadang pengunjung tidak mengisi data dengan benar, walaupun data tidak benar pesan tetap saja terkirim ke email admin.
3. Pengunjung mengirim pesan diluar artikel yang dimaksud.

LIVE DEMO

Sebelumnya aku pernah menciptakan postingan perihal layanan contact us juga, anda sanggup memakai ini jikalau anda tertarik.

Baca Juga :

• Cara menciptakan Layanan Contact Us di Blogger hanya 5 menit!

Form contact us yang aku bagikan kali ini memakai 3 input, diantaranya Name, Email dan Message, dan juga dibekali 2 tombol yaitu, tombol "Send" dan juga tombol "Reset". Ok pribadi saja ke proses pembuatannya.

Cara Membuat Layanan Contact Us di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman.

Cara Kedua :

1. Buatlah 1 halaman dengan judul "Contact Us" atau "Hubungi Kami".
2. Pilih bab HTML.

Screenshoot :

3. Copy & Paste instruksi berikut ini dan letakkan pada bab HTML jangan pada bab COMPOSE.

<div dir="ltr" style="text-align: left;" trbidi="on"> <style> .notification{     height: 35%;     width: 90%;     font-size: 16px;     font-weight:bold;     text-align: left;     color: #fff!important;     background: #07ACEC;     padding: 15px 25px;     border-radius: 4px;     border: none;     outline: none;     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);     margin-top: 15px;         }   .ribbon{position:relative;z-index:1;padding:1em 2em} .ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#07ACEC;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em} .ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #07ACEC;z-index:-1} .ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent} .ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent} .ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#07ACEC transparent transparent transparent;bottom:-1em} .ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em} .ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0}  .contact-us{ float:none; position:relative; margin-bottom:45px; margin-right:10px } .contact-us input,.contact-us textarea{ font-size:15px; padding:15px 0; display:block; width:100%; border:none; border-bottom:1px solid #ddd } .contact-us input:focus,.contact-us textarea:focus{ outline:none } .contact-us label{ color:#999; font-size:15px; font-weight:400; position:absolute; pointer-events:none; left:0; top:10px; transition:.2s ease all; } .contact-us input:focus   label,.contact-us input:valid   label,.contact-us textarea:focus   label,.contact-us textarea:valid   label{ top:-20px; font-size:14px; color:#07ACEC; } .form{ position:relative; display:block; width:100%; } .form:before,.form:after{ content:''; height:2px; width:0;bottom:1px; position:absolute; background:#07ACEC; transition:.2s ease all; } .form:before{ left:50%; } .form:after{ right:50%; } .contact-us input:focus   .form:before,.contact-us input:focus   .form:after,.contact-us textarea:focus   .form:before,.contact-us textarea:focus   .form:after{ width:50%; } .minimalis{ position:absolute; height:50%; width:100px; top:25%; left:0; pointer-events:none; opacity:.5; } .contact-us input:focus   .minimalis,.contact-us textarea:focus   .minimalis{ animation:inputminimaliser .3s ease; } .contact-us input:focus   label,.contact-us input:valid   label,.contact-us textarea:focus   label,.contact-us textarea:valid   label{ top:-20px; font-size:13px; color:#07ACEC; } input#ContactForm1_contact-form-email-message{ height:150px; } input#ContactForm1_contact-form-submit{ color:#fff!important; height: 50px; font-size: 14px; font-weight:bold; background:#07ACEC; padding:15px 25px; border-radius:4px; border:none; outline:none; box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); cursor:pointer; transition:all .4s ease-in-out; text-transform:uppercase; float:left; margin-top:15px; } input#ContactForm1_contact-form-submit:hover{ box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); } input#ContactForm2_contact-form-submit{ height: 50px; font-weight: bold; font-size: 14px; color:#fff!important; background:#07ACEC; padding:15px 25px; border-radius:4px; border:none; outline:none; box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); cursor:pointer; transition:all .4s ease-in-out; text-transform:uppercase; float:right; margin-top:15px; } input#ContactForm2_contact-form-submit:hover{ box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); } #ContactForm1_contact-form-error-message{ float:right; background:#D32F2F; color:#fff; font-size:13px; font-weight:700; border-radius:3px; } #ContactForm1_contact-form-success-message{ float:right; background:#4CAF50; color:#fff; font-size:13px; font-weight:700; border-radius:3px; } </style>  <br /> <br /> <div class="ribbon"> <h1 class="ribbon-tampilan"> <strong class="ribbon-nama">Hubungi Kami</strong> </h1> <form name="contact-form"> <div class="contact-us"> <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="minimalis"></span> <span class="form"></span> <label> Your Name</label> </div> <div class="contact-us"> <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="minimalis"></span> <span class="form"></span> <label> Your Email</label> </div> <div class="contact-us"> <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="minimalis"></span> <span class="form"></span> <label> Your Message</label> </div> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <input id="ContactForm2_contact-form-submit" type="reset" value="Reset" /> <br /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </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'] = '53970099181xxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d53970099181xxxxxxx','//','53970099181xxxxxxx'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '53970099181xxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script></div> <br /> </div>

Keterangan :

Temukan pada instruksi diatas gunakan (CTRL + F) "53970099181xxxxxxx" silakan anda ganti dengan BlogID kepunyaan anda. Berikut ini ialah cara mencari BlogID :

Screenshoot :

4. Simpan Template!

Demikianlah Tutorial kali ini, bila ada kesalahan? silakan jangan sungka untuk berkomentar dibawah ini. Terakhir, silakan anda lihat atau sanggup pratinjau. Lalu kemudian isi dengan nama, email dan pesan yang akan dikirim, kemudian cek email apakah email masuk atau tidak. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Layanan Contact Us di Blogger