20 Komentar

Tambah tombol translate di WordPress.com (Updated)

Translate

Seringkali kita temui fitur terjemahan berupa tombol dengan gambar bendera negara-negara yang bersangkutan, yang jika kita klik akan otomatis menterjemahkan teks yang ada di website tersebut ke dalam bahasa tertentu.

Ambil contoh perhatikan gambar kotak biru sebelah kanan bawah dengan inisial G.t  didalamnya, jika anda klik ia akan otomatis menterjemahkan situs ini ke dalam bahasa inggris.

Ingin memiliki tombol tersebut di blog anda, caranya mudah silahkan ikuti tutorial berikut dalam membangun kode HTML-nya.

Jangan khawatir tidak perlu mengerti  cara kerja html, kebutuhan minimal dalam membuat tombol ini adalah anda bisa/mengerti/sanggup melakukan copy dan paste.

Kode yang akan dibuat menggunkan HTML tanpa Javascript, tombol translate ini dapat dipasang di semua platform seperti: Drupal, Joomla, atau Blogspot tidak hanya di WordPress😉.


Tombol translate dengan text

Kita mulai, pertama-tama kita bedah kode dari link dibawah ini :

Translate Bahasa to English

tersusun dari kode HTML :

<a href="http://translate.google.com/translate?u=http%3A%2F%2Fmuslimpribadi.wordpress.com&langpair=id|en">
Translate Bahasa to English
</a>

Perhatikan bagian bergaris bawah dari kode diatas, ganti muslimpribadi.wordpress.com dengan alamat situs anda.

Sebagai contoh jika alamat situs anda adalah http://alamatkamu.com bentuk lengkap kode html-nya menjadi :

<a href="http://translate.google.com/translate?u=http%3A%2F%2Falamatkamu.com&langpair=id|en">
Translate Bahasa to English
</a>

PERHATIAN!! Penulisan alamat URL tanpa http://

Penulisan tombol translate dengan text adalah yang paling mudah. Namun jika dengan gambar akan lebih indah😉

Bagaimana jika ditambahkan gambar?

Google Translate

translate36x36.png

Untuk menggunakan tombol gambar ada sedikit modifikasi, tinggal hapus kata-kata Translate Bahasa to English dengan kode HTML gambar, contoh kode HTML tombol biru yang saya gunakan:

<a href="http://translate.google.com/translate?u=http%3A%2F%2Fmuslimpribadi.wordpress.com&langpair=id|en">
<img title="Quick Translate!" src="https://muslimpribadi.files.wordpress.com/2011/04/translate36x36.png" alt="Translate" />

</a>

Jika anda suka dengan tombol biru tersebut silahkan copy saja bagian yang berwarna hijau dan sisipkan ke kode HTML anda. Namun jika anda ingin gambar anda sendiri, maka:

  1. Upload gambar anda ke wordpress atau ke manapun yang memberikan akses URL langsung (direct link).
  2. Copy URL lokasi gambar yang telah di upload dan ganti kode HTML yang berwarna hijau dan bergaris bawah

Terjemahkan ke bahasa lain

Sampai tulisan ini dibuat Google Translate telah mendukung hingga 64 bahasa. Kode HTML diatas berguna untuk menterjemahkan blog atau situs berbahasa Indonesia ke Bahasa Inggris. Bagaiman jika ternyata kebanyakan pengunjung situs anda berasal dari slovakia? akan menjadi tidak relevan jika situs anda diterjemahkan ke dalam bahasa Inggris🙄

Mengubah arah terjemahan google translate sangatlah mudah, namun harus sedikit teliti. Saya akan memberikan contoh tombol translate ke bahasa Finlandia dengan kode negara fi.

Terjemahkan Bahasa ke Finnish

Kode HTML-nya menjadi :

<a href="http://translate.google.com/translate?u=http%3A%2F%2Fmuslimpribadi.wordpress.com&langpair=id|fi">Terjemahkan Bahasa ke Finnish</a>

Jika kita perhatikan, perbedaan dari kode HTML sebelumnya adalah bagian yang bergaris bawah. Jika sebelumnya id|en maka sekarang menjadi id|fi. id merupakan kode bahasa Indonesia, en bahasa Inggris, dan fi untuk bahasa Finlandia. Jadi cara membaca kode tersebut adalah:

  • id|en → terjemahkan dari bahasa Indonesia (id) ke Bahasa Inggris (en)
  • id|fi → terjemahkan dari bahasa Indonesia (id) ke bahasa Finlandia (fi)
  • auto|zh-TW → terjemahkan dari bahasa yang terdeteksi ke bahasa Cina Tradisional
  • nl|et → terjemahkan dari bahasa Dutch ke bahasa Estonian

Cukup sederhana kan? berikut adalah daftar kode negara yang digunakan di Google Translate.

Kode negara Google Translate (sumber)

Language Code Language Code
Afrikaans af Albanian sq
Arabic ar Belarusian be
Bulgarian bg Catalan ca
Chinese Simplified zh-CN Chinese Traditional zh-TW
Croatian hr Czech cs
Danish da Dutch nl
English en Estonian et
Filipino tl Finnish fi
French fr Galician gl
German de Greek el
Hebrew iw Hindi hi
Hungarian hu Icelandic is
Indonesian id Irish ga
Italian it Japanese ja
Korean ko Latvian lv
Lithuanian lt Macedonian mk
Malay ms Maltese mt
Norwegian no Persian fa
Polish pl Portuguese pt
Romanian ro Russian ru
Serbian sr Slovak sk
Slovenian sl Spanish es
Swahili sw Swedish sv
Thai th Turkish tr
Ukrainian uk Vietnamese vi
Welsh cy Yiddish yi

Gambar bendera dapat di-download di famfamfam.com atau freeiconsdownload.com.

Pasang dimana?

Untuk WordPress.COM yang paling umum dipasang di text widget (Cari di menu AppearanceWidgetsText). Namun sebenarnya dapat dipasang dimana saja selama diijinkan menampilkan kode HTML terutama tag link.

Tips! Kombinasikan kode negara diatas dan sesuaikan dengan gambar bendera negara.

Terjemahkan ke bahasa Jepang: jepang

Kode HTML:

<a title="ke bahasa Jepang" href="http://translate.google.com/translate?u=http%3A%2F%2Fmuslimpribadi.wordpress.com&amp;langpair=id|ja" target="_blank"><img src="https://muslimpribadi.files.wordpress.com/2011/12/jepang.gif" alt="jepang" width="25" /></a>

Terjemahkan ke bahasa Korea: korea

Kode HTML:

<a title="ke bahasa Korea" href="http://translate.google.com/translate?u=http%3A%2F%2Fmuslimpribadi.wordpress.com&amp;langpair=id|ko" target="_blank"><img src="https://muslimpribadi.files.wordpress.com/2011/12/korea.gif" alt="korea" width="25" /></a>

Looping ketika translate

Google translate looping

Looping pada Google translate

Permasalahan yang ditemukan ketika melakukan translate adalah terjadi perulangan atau looping ketika proses terjemahan dilakukan seperti yang dilaporkan di chrome atau firefox.

Salah satu solusi yang bisa dicoba untuk memperbaiki bug ini adalah dengan meng-update browser anda.

Selamat Mencoba😎

Kode didukung oleh Google translate.

20 comments on “Tambah tombol translate di WordPress.com (Updated)

  1. Walah…… ada tho begini…. jd minat. Thx sharingnya kak

  2. info yang sangat bermanfaat gan . . .
    salam kenal . . .🙂

  3. sangat membantu sob artikelnya….
    salam knl………….😀
    http://galeriabiee.wordpress.com/

  4. Thanks bos… atas infonya…sangat berguna

  5. salam persahabatan sobat…… salam kenal….. sobat ada sesuatu yg pingin q tanyakan bisa ga via sms…… num q 085933009444

  6. thanks infonya,,

    kaLi kali ada waktu berkunjung ya di http://senodmj.wordpress.com🙂

  7. Aku kok ga bisa yah??? apa yang salah?

    • Kode-nya sebagian besar udah ok, tinggal dibenerin dikit lagi:

      TEXT:

      <a href="http://translate.google.com/translate?u=http%3A%2F%2Fasammaniscerita.wordpress.com&amp;langpair=id|en">English</a>
      

      GAMBAR:

      <a href="http://translate.google.com/translate?u=http%3A%2F%2Fasammaniscerita.wordpress.com&amp;langpair=id|en"><img src="http://asammaniscerita.files.wordpress.com/2012/01/kotu.jpg" /></a>

      Coba pilih mau yang mana trus copy paste. O ya beberapa browser bakalan looping

  8. makasih makasih makasih🙂

  9. Susah yah ,, gimana sih bingung,,>>???

  10. god artikel, kalo lagi browsing singgahin ya ni blog ane gan http://jualantoko.com/

  11. thanks buat artikel dan tutorialnya gan.
    mohon sarannya untk blog ane..
    monggo di klik ceritamichael.wordpress.com

  12. makasih buat tutorialnya mas,, berguna banget,,

  13. makasih banyak, simple but powerfull

Menurut anda bacaan ini bermanfaat? Ada tambahan? Atau mungkin mencari jawaban lain? Tulis disini Ok (:

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: