Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / BLOGGER / TIPS / TUTORIAL

Cara Mudah Membuat Contact Us Keren di Blogger

Posting Komentar
Contact Us By Freepik

Contact Us memiliki banyak variasi kata di setiap web atau situs seperti Form Kontak, Hubungi Kami, Kontak Kami, dan masih banyak lagi, namun hal tersebut sama saja hanya penyebutannya yang berbeda. Tentunya kalian bebas memilih variasi Contact Us ini, sebelum kita masuk ke Cara Mudah Membuat Contact Us  Keren di Blogger mirip CaraSatuKu, saya akan menjelaskan tentang Contact Us dan fungsinya

Apa itu Contact Us?

 Jika diartikan dalam bahasa Indonesia Contact Us disebut juga kontak kami. kontak kami adalah halaman yang berisi formulir untuk tempat kritik, pesan, atau menghubungi admin dari situs tersebut.

Apa Fungsi dari Contact Us?

Contact Us memiliki banyak fungsi yang penting di antaranya :

  • Sebagai tempat saran, kritik, pesan dari pengunjung ke Admin Situs tersebut
  • Berpotensi mendapatkan banyak pengunjung, karena jika anda bersikap ramah kepada pengunjung, mereka pun tidak sungkan untuk kembali mengunjungi blog kalian
  • Lebih besar kesempatan di approve adsense, sebab Contact Us adalah komponen penting dari blog
Baca Juga : Cara Cepat Agar Blog Cepat Di Approve Oleh Google Adsense

Kekurangan dari Contact Us di Blog

 Selain memiliki fungsi yang penting ,ternyata memasang contact us di blogger juga ada kekurangannya, yaitu digunakan oleh pengunjung yang tidak bertanggung jawab untuk mengirimkan pesan yang tidak jelas ataupun tidak sesuai dengan blog. Tapi kalian tidak usah terlalu dipikirkan hal tersebut, karena itu sudaah biasa terjadi.

Cara Mudah Membuat Contact Us Keren di Blogger 

 Sebenarnya sudah banyak cara - cara yang bervariasi membuat contact us yang tersebar di Google. Tetapi disini saya akan memberikan tutorial membuat Contact Us hanya dengan menggunakan kode HTML.

1. Buat Halaman dan Masukkan Kode HTML

 Silahkan buat halaman contact us kalian, setelah itu silahkan masukkan kode HTML berikut ini

  1. <form name="contact-form">
  2. <div class="formcolumn1">
  3. <input id="ContactForm1_contact-form-name" name="name"placeholder="Name" size="30" type="text" value="" /><br/>
  4. <input id="ContactForm1_contact-form-email"name="email" placeholder="Email" size="30" type="text"value="" /></div>
  5. <div class="formcolumn3">
  6. <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message"placeholder="Message" rows="7"></textarea><br /></div>
  7. <div class="formcolumn4">
  8. <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br /></div>
  9. <div style="max-width: 100%; text-align: center; width: 100%;">
  10. <div id="ContactForm1_contact-form-error-message">
  11. </div>
  12. <div id="ContactForm1_contact-form-success-message">
  13. </div>
  14. </div>
  15. </form>
  16. <br />
  17. <style scoped="" type="text/css">
  18. #ContactForm1,#comments{display:none}
  19. #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
  20. #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
  21. #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
  22. #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
  23. .formcolumn4{position:relative}
  24. .formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioj5h1SjXGgPWCgXnK7Sak1wIir_-rtkaCj2QGK83mJR3mj4vePGhgSbnrl1i4Qt1NsGpBT0__Pslo7ZyvAXCu8nSXbmEWlbHXrwRxVl5WvSs0Zxfp_qbOGXlRWPZNfwgTnL7P-5JVgHgI/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
  25. #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
  26. #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
  27. form{color:#888}
  28. .formcolumn1,.formcolumn2{float:left;width:50%}
  29. .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
  30. .formcolumn2{padding:0 0 0 10px}
  31. @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
  32. </style><br />
  33. <br />
  34. <scriptsrc="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br />
  35. <script type="text/javascript">
  36. //<![CDATA[
  37. if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
  38. _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': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
  39. //]]>
  40. </script>

2. Copy dan Paste Kode HTML diatas

 Caranya kalian copy script diatas lalu  klik HTML, paste kode tersebut dan jangan lupa mengganti : 

  • Ubah semua kode 7342017194742683056 dengan kode ID Blog anda.
  • Ubah URL www.arlinadzgn.com menjadi URL Blog anda
Script By ArlinaDesign

 Setelah itu klik "Publishkan" dan kalian sudah berhasil membuat Contact Us seperti situs ini. Jika ada pertanyaan atau saran silahkan komen dibawah, tombol komennya ada dipaling atas.

Posting Komentar untuk "Cara Mudah Membuat Contact Us Keren di Blogger"