Panduan Lengkap dengan Gambar cara membuat Contact Me di blog

Panduan Lengkap dengan Gambar cara membuat Contact Me di blog

Belajar Blog Leski - Panduan Lengkap dengan Gambar cara membuat Contact Me di blog. Sudah lama sejak saya terakhir kali mengupdate postingan di blog ini. Terhitung sejak tanggal 28 Agustus 2013 sudah hampir satu setengah tahun yang lalu. Belakangan, saya memang sibuk dengan dunia nyata dan lebih fokus di blog Slashky Gitaris yang sekarang sudah memiliki views di atas 5000 per hari. Untuk menandai kembalinya saya menulis curhat di blog ini, maka saya akan mengulas bagaimana cara membuat Contact Me di blogspot. Mengapa penting membuat contact me di blog? Salah satu alasannya adalah karena ini termasuk syarat bila kalian ingin mencoba mendaftar dan di terima jadi publisher google adsense. Selain itu, contact me juga digunakan untuk membuat pernak-pernik lain seperti membuat Privacy Policy, Dislaimer, Term of Service (TOS). Tapi yang paling penting adalah agar pengunjung bisa mengirim pesan atau mengontak kita secara pribadi. Bagi blog untuk bisnis online, ini bisa jadi harga mati karena bisa-bisa di sangka penipu.

Usut punya usut, ternyata menghadirkan contact me di blog bukanlah perkara yang sulit, walaupun kenyataannya banyak blogger pemula yang mengabaikan hal ini, termasuk saya sendiri. Dulu sebelum mengerti hal ini, saya cenderung tidak ambil pusing, sehingga mungkin ini alasan mengapa blog Slashky Gitaris ditolak mendaftar di google adsense walaupun views di atas 3000 per hari kala itu. Tapi sekarang sedikit berbeda karena ketiga blog saya sudah saya lengkapi dengan artibut contact me dan blog ini sendiri saya buat persis sebelum membuat artikel ini karena saya screenshot dulu gambar-gambarnya. ^_^

Kita tidak perlu berpikir rumit karena sebenarnya blogger sudah menyediakan widget ini, sehingga daripada menggunakan aplikasi pihak ketiga, lebih baik kita menggunakan widget bawaan google. Asyik tho?  Namun, ada kekurangan dari widget ini yaitu seperti kebanyakan widget bawaan blogger yang lain adalah hanya ditempelkan pada layoutnya saja. Tapi tenang jangan berkecil hari dulu karena kita akan memodifikasi widget ini sehingga menyatu dengan template kita.

Dari pada kelamaan, berikut saya akan memandu bagaimana cara membuatnya dan untuk memudahkan langsung saya berikan screenshotnya.

1. Menambahkan Widget Formulir Kontak ( Form Contact )

Untuk menambahkan Widget Formulir kontak ini, silahkan masuk Tata letak > Tambahkan Gadget > Gadget Lainnya > Formulir kontak > Simpan (lihat gambar)

Tidak perlu merubah posisi widget ini karena tidak berpengaruh.

2. Modifikasi Widget Formulir Kontak

Lalu di bagian ini, selanjutnya kita akan memodifikasi widget bawaan ini biar menyatu dengan template kita. Masuk ke menu Template > Edit Template > gunakan ctrl+f untuk menemukan kata ContactForm > tekan Enter agar code nya terbuka. Soalnya kode ini beberapa yang tersembunyi di dalam.  

Setelah ketemu cari dan hapus kode di bawah ini ! Pastikan jangan sampai salah ya.

1.           <b:if cond='data:title != &quot;&quot;'>

2.             <h2 class='title'><data:title/></h2>

3.           </b:if>

4.           <div class='contact-form-widget'>

5.             <div class='form'>

6.               <form name='contact-form'>

7.                 <p/>

8.                 <data:contactFormNameMsg/>

9.                 <br/>

10.               <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>

11.               <p/>

12.               <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>

13.               <br/>

14.               <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>

15.               <p/>

16.               <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>

17.               <br/>

18.               <textarea class='contact-form-email-message' cols='25'expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>

19.               <p/>

20.               <input class='contact-form-button contact-form-button-submit'expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;'expr:value='data:contactFormSendMsg' type='button'/>

21.               <p/>

22.               <div style='text-align: center; max-width: 222px; width: 100%'>

23.                 <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>

24.                 <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>

25.               </div>

26.             </form>

27.           </div>

28.         </div>

29.         <b:include name='quickedit'/>

Bila kurang paham, lihat gambar di bawah ini

Setelah di hapus pakai Del, Simpan Template.

3. Buat laman kontak 

Biar Contact Me muncul di blog, selanjutnya kita akan membuat laman atau page untuk Contact me. Caranya klik menu Laman > Laman Baru. Lihat gambar !

Pada bagian laman pilih html(jangan compose) lalu copy dan paste semua kode script di bawah ini.

</div><div class='widget ContactForm' id='ContactForm1'>

  <div class='contact-form-widget'>

    <div class='form'>

      <form name='contact-form'>

        <p>Name<p>

        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

        <p>E-mail *</p>

        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

        <p>Message *</p>

        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>

        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>

        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>

        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>

      </form>

    </div>

  </div>

Kurang jelas lihat gambar berikut

Simpan dengan nama Contact Me atau Contact us, kontak kami, dll terserah kalian. Jadi dech. 

Pertanyaannya dimanakah orang bisa menemukan Contact Me ? Jawaban yang sering kita jumpai di blog-blog adalah di menu-menu header. Bagaimana cara meletakkannya? Yuk, saya pandu lagi.

4. Menambahkan contact me di Menu header

Umumnya template menyediakan menu Contact yang masih kosong, oleh karena itu kita akan mengisinya dengan Contact me yang telah kita buat. Caranya

Temukan url Contact Me yang telah kita buat, lihat gambar

Copy url nya

Masuk menu Template > Edit Tempalte > ctrl+f > Temukan 'Contact' ( biasanya berada di atas) dan Paste url tadi. Kata Contact bisa kita udah sendiri !

Simpan Template.

Buka blog dan klik menu contact, dan hasilnya adalah 

Huft... selesai sudah !

Bagaimana mudah bukan? (yang nulis artikel ngos-ngosan)

Nah, sekian dulu postingan Panduan Lengkap dengan Gambar cara membuat Contact Me di blog kali ini, semoga bermanfaat bagi kita.