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.

Read more

9 Tips Edit Template blog agar SEO Friendly

9 Tips Edit Template blog agar SEO Friendly

Template adalah komponen yang mendukung kinerja blog kita, terlebih bila kita ingin template blog kita sesuai dengan kriteria SEO. Seringkali para blogger mengabaikan sisi SEO ini karena lebih mementingkan tampilan blog daripada script pendukung yang ada di dalam blog tersebut yang notabane adalah faktor paling penting. Keren tetapi tidak bisa terindex dengan baik akan percuma.

Ada sebagian orang yang mempertahankan desain/tampilan blognya karena kebutuhan dan tema dari blog itu sendiri. Oleh karena itu, di sini saya akan mencoba memberikan tips agar blog template yang Anda gunakan memenuhi kriteria SEO.

Bila Anda memiliki pemikiran bahwa tampilan adalah segalanya maka kita punya pandangan yang sama ketika pertama kali memulai dunia blog. Perlu saya ceritakan bahwa ini adalah blog saya yang kedua dan tulisan yang saya tulis di sini merupakan hasil eksperimen yang pernah saya lakukan terhadap blog saya yang sebelumnya.

Kembali ke permasalahan awal tentang seperti apa kriteria template yang SEO mari kita lihat beberapa kriteria berikut :

#1 Heading

Biasanya heading tersebut di beri tag berdasarkan  tingkatan judulnya atau headingnya

• Judul Halaman <h1>
• Judul artikel <h1>
• Judul Poin dalam Artikel <h2>
• Judul Sub Poin dalam artikel <h3>
• Judul widget <h4>

Heading H1 seharusnya menampilkan kata kunci yang penting bagi halaman tersebut. Ini dapat terlihat ketika Anda berada di halaman beranda heading ini akan menampilkan judul blog dan di halaman artikel menampilkan judul artikel. Anda bisa juga menggunakan Heading ini di dalam postingan Anda.

Sekarang kita akan melihat tag untuk <h2> dan <h3>

Perhatikan ! 

Backup terlebih dahulu template Anda, segala kemungkinan gagal bisa saja terjadi.

Setiap langkah di bawah ini di mulai dengan 

• Masuk Menu Template
• Pilih Edit Template (Sebelumnya pilih cadangkan/pulihkan pada menu di sebelah kanan Anda agar template anda sebelum di edit bisa Anda backup terlebih dahulu)
• Gunakan ctrl+f untuk memudahkan menemukan setiap kata yang dimaksud.

Cara mengubah tag <h3> menjadi <h2>

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

ubah sehingga menjadi <h3> menjadi <h2> sehingga menjadi seperti di bawah ini

<h2 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h2> 

cari kode di bawah dengan menggunakan ctrl+f

<h3 class='mobile-index-title entry-title'> <data:post.title/> </h3>

 ubah menjadi h3 menjadi h2

<h2 class='mobile-index-title entry-title'> <data:post.title/> </h2> 

Tetapi tidak semua template dapat menemukan kode di atas, template ini juga tidak ada sehingga kita mencari h3 sehingga menemukan kode seperti ini :

<h3 class='mobile-index-title entry-title'>        <a href='javascript:void(0)'><data:post.title/></a>      </h3>

ubah menjadi h3 menjadi h2

<h2 class='mobile-index-title entry-title'>        <a href='javascript:void(0)'><data:post.title/></a>      </h2>

Untuk judul widget <h2> menjadi <h4>

Cari judul widget, misalnya dalam blog ini ada popular post, cari menggunakan ctrl+f

Kalau belum di ubah akan ada kode di bawah ini :  

<b:if cond='data:title'><h2><data:title/></h2></b:if>

Kita ubah menjadi <h2>menjadi <h4>, sehingga

<b:if cond='data:title'><h4><data:title/></h4></b:if>

#2 Title Tag

Kenapa title tag ini penting? Salah satu alasannya adalah karena nanti judul artikel itu harus di dahulukan daripada nama blog. Kebanyakan blogger pemula tidak memperhatikan hal ini. Jadi misalnya seseorang membangun blog dengan nama Blog Jono (ilustrasi nama) dan kemudian dia mempostingkan artikel yang berjudul "Cara memperbaiki kipas Angin". Bila kita tidak mengatur title tag ini maka  akan muncul seperti ini  "Blog Jono : cara memperbaiki kipas Angin." Pertanyaannya siapakah yang akan mencari di mesin pencari dengan nama Blog Jono? Jadi inilah alasan kenapa kita harus mengganti title tag agar setidaknya nama blog kita berada dibelakang judul bahkan mungkin sebaiknya dihilangkan.

Caranya silahkan edit template Anda dengan menggunakan ctrl+f untuk mencari  kode <title> dan pastikan apakan pada bagian <title> sampai  </title> sudah ada kode seperti yang ada di bawah ini, bila belum silahkan copy kode berikut. 

<title><b:if cond='data:blog.homepageUrl == data:blog.url'><data:blog.title/><b:else/><data:blog.pageName/></b:if></title>

Tapi mungkin ada dari kita yang belum sama sekali memiliki kode di atas, caranya mudah copy kode di atas dan letakkan di bawah <head>.

#3 Meta Tag

Anda mungkin bertanya kenapa sebuah blog perlu memakai meta tag? Apa sih meta tag itu sebenarnya?

Meta tag ini adalah salah satu komponen yang diperlukan untuk menjelaskan deskripsi singkat serta kata kunci(keyword) blog kita kepada mesin pencari. Jadi harapannya blog kita mudah ditemukan dan terindex oleh mesin pencari.

Bagaimana cara memasang Meta Tag

Cukup mudah karena kita masih bergulat dengan edit Html jadi kita tinggal mencari dengan ctrl+F untuk menemukan kode <head>. Bila sudah letakkan kode berikut tepat di bawah kode <head>

<meta content='Masukan deskripsi blog anda di sini' name='description'/>    <meta content='Masukan Kata kunci Anda di sini' name='keywords'/>    <meta content='Masukan Nama Anda di sini' name='author'/>

#4 Gunakan rel='canonical'

rel="canonical" ini berfungsi agar tidak terjadi duplikat meta description dan konten. 

Untuk memasang rel="canonical" ini, temukan kode <head> dengan menggunakan ctrl+f. Berikutnya copy dan paste kode berikut tepat di bawah kode <head> tadi.

<link expr:href='data:blog.url' rel='canonical'/>

#5 Harus ada Breadcrumb

Kalau ada yang belum tahu apa itu breadcrumb coba lihat gambar berikut:

Lihatlah urutan, Home>>halaman pertama google>>kata kunci>>keyword>>Tips SEO. Ini adalah cara bagaimana cara google mengcrawl artikel kita sebelum sampai ke judul artikel. Breadcrumb ini juga membantu pengunjung blog kita mengetahui posisi mereka di blog Anda.

Bila Anda ingin mengubah template menjadi SEO friendly dengan mendownload template baru, lihatlah kriteria dari template tersebut apakah sudah memuat breadcrumb ini. Kalau tidak berarti Anda harus mengedit sendiri dan maaf untuk saat ini saya belum bisa menghadirkan tutorialnya. 

#7 Related Post

Related post adalah salah satu fitur yang menunjang agar pengunjung Anda bisa membaca beberapa artikel yang masih terkait dengan artikel yang terkait. Biasanya related post ini akan menyesuaikan dengan kategori atau label yang kita sisipkan ketika membuat sebuah artikel. Jadi pastikan dalam template Anda sudah ada fitur ini. Variasi Related post ini sendiri ada banyak sekali jadi untuk sementara misalnya ada yang berupa scroll, gambar melayang, dsb jadi silahkan mencari yang sesuai dengan selera Anda. 

#8 Tombol Share ke Jejaring Sosial

Fitur ini sekarang menjadi fitur wajib yang harus dimiliki dalam template Anda, mengapa? Karena tombol share itu memudahkan pengunjung Anda untuk menshare tulisan Anda ke halaman facebook dan twitter mereka. Jadi silahkan cari template yang menyediakan fitur ini atau cari variasi yang sesuai dengan selera Anda.

Beberapa blogger juga memberikan ruang untuk pengunjungnya bisa berkomentar menggunakan akun facebook. Ini juga merupakan trik khusus agar postingan tersebut secara langsung bisa muncul di halaman facebook pengunjung yang bersangkutan. Perlu kita ketahui bersama bahwa menurut peringkat yang diberikan ALEXA, facebook menempati peringkat pertama di atas google dan berarti facebook merupakan sebuah situs besar yang memiliki lalu lintas yang ramai. 

# 9 Loading cepat

Nah yang terakhir ini menjadi poin penting dan menjadi pertimbangan bagi pengunjung blog kita. Pengunjung datang dari koneksi dan jaringan yang berbeda jadi usahakan blog kita tidak hadir dengan loading yang lama. saya sendiri terus terang kalau berkunjung ke blog dengan loading yang lama cenderung menutup halaman tersebut apa lagi blog yang dipenuhi oleh banyak iklan.

Aha, ada kata iklan yang muncul di sini, jadi usahakan iklan-iklan dalam blog Anda tidak mengganggu pengunjung yang ingin mencari informasi dari blog Anda. Selain iklan, biasanya pengaruh widget juga bisa mempengaruhi blog Anda, misalnya pemutar musik, radio, dsb. Hal semacam ini tentu saja akan menambah loading blog Anda menjadi lama. Percayalah pengunjung tidak suka dengan loading blog yang lama.

Perlu diingat bahwa sering mengganti template Anda berpengaruh terhadap mesin pencari, bahkan dapat mempengaruhi peringkat dan jumlah pengunjung blog Anda. Oleh karena itu, catatlah terlebih dahulu apa yang ingin Anda ubah dan lakukan itu dalam satu hari dan jangan melakukan hal tersebut secara berkala apalagi setiap hari karena sangat berbahaya. Saya mengatakan ini karena sudah pernah mengalami hal ini dan sebelumnya juga sering mengganti-ganti template.

Nah, itulah 9 tips bila Anda ingin mengedit template Anda agar menjadi SEO Friendly. Ada banyak Template yang dapat di download dari internet tetapi tidak semua template tersebut memenuhi kriteria tersebut. Terlebih untuk Meta Tag yang harus kita atur sendiri sesuai dengan tema blog kita. 

Sekian dulu tips saya kali ini semoga bisa membantu teman-teman semua.

Read more