Cara Membuat Kontak Kami atau Contact Us di Halaman Blogspot dengan Kode Html 100% Work

Cara Membuat Kontak Kami atau Contact Us di Halaman Blogspot dengan Kode Html 100% Work - Lovebirdseo.net. Bagaimana cara mudah membuat laman contact form di website menggunakan code javascript sederhana yang valid? atau bagaimana contoh widget menu hubungi kami di halaman statis blog dengan platform blogger? Berikut ada tutorial mengenai tips blogging untuk pemula membuat halaman web kontak kami yang bisa mengirim pesan langsung otomatis ke email sendiri.

Halaman Formulir kontak kami merupakan sarana komunikasi antara pengunjung website dengan admin atau pemilik blog. Dengan mengirim pesan menggunakan page laman kontak hubungi kami maka komentar yang disampaikan bisa bersifat rahasia dan tidak dapat dibaca oleh umum. Hal ini dilakukan jika ingin bertanya tentang sesuatu yang pribadi atau hal-hal yang tidak pantas untuk konsumsi pembaca umum. Halaman kontak dianggap salah satu kelengkapan sebuah blog selain halaman tetang kami, privacy policy, peta situs dan disclaimer untuk syarat pendaftaran google adsense.

Cara Membuat Kontak Kami atau Contact Us di Halaman Blogspot dengan Kode Html 100% Work

Contoh Gambar Widget Halaman Kontak Kami

Langkah 1

Silakan anda login terlebih dahulu ke dashbord blogger, lalu buat halaman baru ( Klik laman - Laman Baru ). 

Ganti metode penulisan dari compose ke html.


Langkah 2

Salin kode html di bawah ini, selanjutnya di copy paste ke halaman yang baru di buat tadi.


<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><br /> <br /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /><br /> <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="Send Message" /> <br /> <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> <style scoped="" type="text/css"> #comments,.post_meta,#blog-pager{display:none} form{color:#666} #kontak-seo{margin:auto;max-width:300px} #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:#34495e;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:#3498db;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} .contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;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%;}} .contact_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);z-index:99999} .contact_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:30%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .contact_message:before{content:"\f164";font-family:FontAwesome;font-weight:500;font-size:30px;display:block;margin-bottom:10px} @media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}} </style><br /> <script type="text/javascript"> //<![CDATA[ if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); //]]> </script><br /> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br /> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4908995804156567999';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\4908995804156567999','//lovebirdseo.net/','4908995804156567999'); _WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'> <div class='contact_message'> <b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div> </div> <br/>", "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": "4908995804156567999", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull")); //]]> </script> <br /> <div class="clear"> </div>

Langkah 3

Ganti id blog yang berwarna kuning "4908995804156567999" dengan id blog temen temen yang bisa di lihat pada alamat halaman dashbord ada "blogID=" dan "postID=" pastikan kode id blog yang "blogID=" yang di pilih.

Setelah itu ganti alamat lovebirdseo.net yang ber warna merah dengan alamat blog temen temen. Selamat halaman kontak form sudah selesai di buat jangan lupa simpan laman dan published laman untuk di terbitkan.

Demikian cara membuat formulir kontak kami sederhana dengan kode javascript html tanpa log in dan daftar di website penyedia pembuatan contact form.



Subscribe to receive free email updates:

1 Response to "Cara Membuat Kontak Kami atau Contact Us di Halaman Blogspot dengan Kode Html 100% Work"

  1. om,, trus pesannya masuk lwt apa? ane coba kaga berhasil

    ReplyDelete