Cara Memasang Widget Google Translate (Multi-Language) di blog dan wordpress

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024

Hi Web Developer! Kembali lagi bersama guru design, kali ini guru design akan berbagi tutorial

Cara Memasang Widget Google Translate (Multi-Language) di blog dan wordpress

Cara Memasang Widget Google Translate (Multi-Language) di blog dan wordpress

Kamu pasti sudah tahu kan apa manfaat dari Widget Google Translate ini? ya tentu gunanya adalah untuk menterjemahkan laman blog kamu ke berbagai macam bahasa asing, menarik bukan?

Seperti biasa, sebelum mengikuti tutorial ini saya himbau kembali agar menyiapkan secangkir kopi untuk untuk menemanimu supaya tidak ngantuk, dan untuk para suhu, mastah mohon dikoreksi, oke lanjut ke tutorialnya.

Pertama, Buka Blog atau Wordpress Kamu Masing-Masing

  1. Pilih Menu Tema
  2. Pilih Edit HTML
  3. Cari kode head penutup seperti ini </head> kemudian copy dan paste-kan kode widget translate berikut tepat diatasnya.
<!-- Google Translate Script -->
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- Google Translate Style -->
<style>
#google_translate_element_position {
position:relative;margin:10px:60px;z-index:9999999999;}
.goog-te-banner-frame{display:none!important}
body {position:relative;top:0!important}
</style>

Kedua, Tambahkan Widget Google Translate

Silahkan tempatkan widget google translate multi-language ini sesuai dengan yang kamu inginkan, dengan cara copy kode di bawah ini dan paste-kan di lokasi yang sudah ditentukan. 

<div id="google_translate_element_position" class="hidden-sm hidden-xs"><div id="google_translate_element"></div></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'id', includedLanguages: 'bg,bs,ca,co,zh-CN,cs,cy,da,de,el,id,en,es,et,fa,fi,fr,fy,ga,gd,gl,he,hu,iw,is,it,ka,la,lb,lt,lv,mk,nl,no,pl,pt,ro,ru,sk,sl,sq,sr,sv,tr,uk,zh', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

 

Selesai

Simpan template kamu dan lihat hasilnya

Catatan:

     Jika Widget Google Translate (Multi-Language) tidak berjalan seperti demo di blog ini, silahkan tambahkan kode berikut ini tepat diatas tag head penutup </head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


Demo

Result

Sekian tutorial cara memasang widget google translate multi bahasa semoga bermanfaat, trimakasih.

Rafiqi, S.Kom.