Iklan Bawah Header

Cara Mudah Membuat Contact Us Keren di Blogger

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://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/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.


3 Responses to "Cara Mudah Membuat Contact Us Keren di Blogger"

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Anapoker Situs Poker Online terpercaya, Mau bagi-bagi Freechips di akhir tahun ini lho

    Dapatkan Bonus Harian Untuk Deposit New member menjadi 5%+10% Freechips, Hanya ada di Anapoker

    Contact Anapoker
    Whatsapp : 0852 2255 5128
    Line ID : agenS1288
    Telegram : agenS128

    Kunjungi Situs Games Online Uang Asli Terpercaya Lainnya :
    link alternatif sbobet

    sbobet alternatif

    login sbobet

    link sbobet

    sabung ayam online

    adu ayam

    casino online

    poker deposit pulsa

    deposit pulsa poker

    deposit pulsa

    deposit pulsa

    deposit pulsa

    ReplyDelete
  3. Permainan Game Online Zeus Bola adalah permainan game online menggunakan uang asli yang teraman dan terpercaya di Indonesia.

    kami menyediakan berbagai jenis permainan seperti :
    - SPORTBOOKS
    - LIVECASINO
    - IDNPOKER
    - SLOTGAME
    - TEMBAK IKAN
    - SABUNG AYAM ( S128 dan SV388 )
    - TANGKAS

    Adapun Bonus yang kami tawarkan Banyak Sekali Bonus-Bonus Menarik.
    Bonus-Bonus Yang Tersedia Di Situs Zeus Bola Sebagai Berikut :

    ☑ Bonus New Member 15%
    ☑ Bonus Every Day 10%
    ☑ BONUS REFERRAL ZEUSBOLA
    ☑ Bonus Cashback 15% + Rollingan 0.6% Setiap Minggu
    ☑ Freechips Extra Turn Over Poker Online

    Zeus Bola juga siap melayani anda dengan pelayanan terbaik, yang akan dibantu oleh Customer Service yang sangat ramah.
    Proses transaksi Deposit atau Witdraw sangat cepat dan aman.

    Tunggu apa lagi ?
    Mari Gabung Dengan Cara Klik :: http://bit.ly/RegistrasiZeusbola

    Contact person Us :

    • Live Chat Zeus Bola : >> http://bit.ly/KLIKDISINISEKARANGJUGA <<
    • Whatsapp : >> https://wa.me/6281333555996 <<
    • Telegram : >> https://t.me/zeusbola <<

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel